<!-- source-hash: 22dc571f86ff6412c173e898a5bebb85 -->
A client-side React component that renders a full-featured mobile navigation panel with backdrop overlay, keyboard support, and scroll locking.

## Key Components

### `MobileNavPanel`
The primary export — a modal-style slide-in navigation panel controlled by `isOpen`.

**Props (`MobileNavPanelProps`):**

| Prop | Type | Description |
|------|------|-------------|
| `isOpen` | `boolean` | Controls panel visibility |
| `config` | `MobileNavConfig` | Navigation structure and callbacks |

**Behaviors:**
- Locks `document.body` scroll while open
- Closes on `Escape` key press (via `config.onClose`)
- Closes on backdrop click; prevents propagation inside panel
- Renders `null` when closed (no DOM presence)

**Layout structure:**
- **Backdrop** — full-screen overlay (`z-[9998]`) that closes the panel on click
- **Panel** — floating card (`z-[9999]`), full-width on mobile / `400px` on `md+`, anchored top-right with scroll-locked content area
- **Header** — fixed close (`X`) button
- **Body** — scrollable section list with optional section titles and nav items
- **Footer** — optional sticky footer from `config.footer`

### `renderNavigationItem` (internal)
Handles three `NavigationItem` render modes:
1. **Custom element** — renders `item.element` directly
2. **Link** — `<Button href=...>` with icon, badge, and active state
3. **Action** — `<Button onClick=...>` with inline badge support

## Usage Example

```typescript
import { MobileNavPanel } from './mobile-nav-panel'
import { useState } from 'react'
import { Home, Settings } from 'lucide-react'

export function AppShell() {
  const [menuOpen, setMenuOpen] = useState(false)

  return (
    <MobileNavPanel
      isOpen={menuOpen}
      config={{
        onClose: () => setMenuOpen(false),
        sections: [
          {
            title: 'Main',
            items: [
              { id: 'home', label: 'Home', href: '/', icon: <Home />, isActive: true },
              { id: 'settings', label: 'Settings', href: '/settings', icon: <Settings /> },
            ],
          },
        ],
        footer: <button onClick={() => setMenuOpen(false)}>Sign Out</button>,
      }}
    />
  )
}
```