<!-- source-hash: c0bb51dff21ce2a1f2d328b688a856a9 -->
A responsive, collapsible navigation sidebar component that adapts between desktop (persistent, width-animating) and tablet (overlay/drawer) layouts, persisting the desktop minimize state to `localStorage`.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `NavigationSidebar` | Component | Main sidebar component with responsive behavior |
| `NavigationSidebarProps` | Interface | Props: `config: NavigationSidebarConfig`, `disabled?: boolean` |
| `MINIMIZED_WIDTH` | Constant | Collapsed width — `56px` |
| `EXPANDED_WIDTH` | Constant | Expanded width — `224px` |
| `STORAGE_KEY` | Constant | `localStorage` key: `of.navigationSidebar.minimized` |

**Internal behavior:**

- **Desktop (`lg+`)** — sidebar pushes content; minimize state persists via `localStorage`
- **Tablet (`md` only)** — sidebar floats as an overlay; always starts minimized (in-memory state only); backdrop scrim + `Escape` key close it
- **Transitions** — enabled after first hydrated paint via `useLayoutEffect` + `requestAnimationFrame` to prevent flash on load
- Items split into `primaryItems` and `secondaryItems` (filtered by `item.section === 'secondary'`)

## Usage Example

```typescript
import { NavigationSidebar } from './navigation-sidebar'
import { NavigationSidebarConfig } from '../../types/navigation'

const config: NavigationSidebarConfig = {
  minimized: false,
  onNavigate: (path) => router.push(path),
  onToggleMinimized: () => console.log('toggled'),
  items: [
    { id: 'dashboard', label: 'Dashboard', path: '/dashboard', icon: HomeIcon },
    { id: 'settings', label: 'Settings', path: '/settings', icon: SettingsIcon, section: 'secondary' },
  ],
}

export default function AppLayout() {
  return (
    <div className="relative flex h-screen">
      <NavigationSidebar config={config} disabled={false} />
      <main className="flex-1 overflow-auto">
        {/* page content */}
      </main>
    </div>
  )
}
```

## Notes

- The parent layout container must be `position: relative` for the tablet overlay anchor to work correctly.
- The `disabled` prop dims all nav items but leaves the collapse toggle interactive.
- Source: [`navigation-sidebar.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/navigation-sidebar.tsx)