<!-- source-hash: 239259ec2e61e6f79f54306c82df0784 -->
Accessible mobile navigation drawer that slides down from the app header, rendering primary nav items in a 2-column grid, secondary items full-width, a user profile card, and an optional logout button.

## Key Components

### `MobileBurgerMenu`

A memoized React component that manages the full mobile menu overlay. Key behaviors:

- **Scroll lock** — uses `usePreventScroll` (react-aria) to block body scroll on iOS and Android while open
- **Focus trap** — `useFocusTrap` contains Tab focus within the panel, supports Escape-to-close, and restores focus on dismiss
- **Animation** — slide-down + fade via Tailwind transition classes; `inert` attribute removes closed items from the tab order without unmounting
- **Layout anchoring** — backdrop and panel use `absolute` (not `fixed`) so they position relative to the app row below any top banner, with `top: 48px` clearing the header

### `MobileBurgerMenuProps`

| Prop | Type | Description |
|---|---|---|
| `isOpen` | `boolean` | Controls open/closed state |
| `onClose` | `() => void` | Called on backdrop click or Escape |
| `config` | `NavigationSidebarConfig` | Nav items and `onNavigate` handler |
| `user` | `object` | Avatar, name, email, role for the header card |
| `onSearchUser` | `() => void` | Optional search-user action button |
| `onEditProfile` | `() => void` | Optional edit-profile action button |
| `onLogout` | `() => void` | Renders logout row when provided |
| `disabled` | `boolean` | Disables all interactive items; backdrop/close still work |

## Usage Example

```typescript
import { MobileBurgerMenu } from './mobile-burger-menu'

const [menuOpen, setMenuOpen] = useState(false)

<MobileBurgerMenu
  isOpen={menuOpen}
  onClose={() => setMenuOpen(false)}
  config={sidebarConfig}
  user={{
    userName: 'Alice Smith',
    userEmail: 'alice@example.com',
    userAvatarUrl: '/avatars/alice.png',
    userRole: 'admin',
  }}
  onEditProfile={() => router.push('/profile')}
  onLogout={handleLogout}
/>
```

**Source:** [`mobile-burger-menu.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/mobile-burger-menu.tsx)