<!-- source-hash: f440873b10ff8a3b76d3a4ca0faf8299 -->
Accessible mobile navigation panel component that renders a floating dialog with scroll lock, focus trapping, and backdrop dismissal for responsive navigation menus.

## Key Components

### Exports

| Export | Type | Description |
|--------|------|-------------|
| `MOBILE_NAV_PANEL_ID` | `string` | DOM id (`'mobile-nav-panel'`) referenced by the header hamburger's `aria-controls` attribute |
| `MobileNavPanelProps` | `interface` | Props shape: `isOpen: boolean`, `config: MobileNavConfig` |
| `MobileNavPanel` | Component | Main panel component |

### Accessibility & Behavior Hooks

| Hook | Purpose |
|------|---------|
| `usePreventScroll` | iOS-aware, ref-counted body scroll lock (shared counter with modals/chat overlays) |
| `useFocusTrap` | Initial focus, Tab containment, Escape-to-close, and guarded focus restore |
| `useHeaderHeight` | Measures live header height so the panel anchors correctly below it |

### Internal: `renderNavigationItem`

Renders each `NavigationItem` in one of three modes:
- **Custom element** — renders `item.element` directly
- **Link item** — renders a `Button` with `href`, `leftIcon`, and `rightIcon` (badge)
- **Button item** — renders a `Button` with `onClick`, with badge appended via `ml-auto` span

## Usage Example

```typescript
import { MobileNavPanel } from './mobile-nav-panel'

const navConfig: MobileNavConfig = {
  onClose: () => setOpen(false),
  sections: [
    {
      title: 'Main',
      items: [
        { id: 'home', label: 'Home', href: '/', isActive: true },
        { id: 'settings', label: 'Settings', onClick: openSettings },
      ],
    },
  ],
  footer: <UserAccountWidget />,
}

<MobileNavPanel isOpen={isNavOpen} config={navConfig} />
```

## Notes

- The panel is **layout-mounted on every page** but returns `null` when closed; observers activate only while open.
- Positioning uses a CSS custom property `--mobile-nav-top` derived from the measured header height, avoiding overflow under mobile browser chrome.
- The footer respects iOS safe-area insets via `env(safe-area-inset-bottom)`.
- Source: [`src/components/navigation/mobile-nav-panel.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/src/components/navigation/mobile-nav-panel.tsx)