<!-- source-hash: 6f802a22aab4156f34b7564f49df9553 -->
Responsive navigation sidebar component that renders a collapsible, accessible side navigation panel with distinct behavior for tablet (overlay/floating) and desktop (push layout) viewports.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `NavigationSidebar` | Component | Main sidebar component with responsive layout logic |
| `NavigationSidebarProps` | Interface | Props: `config: NavigationSidebarConfig`, `disabled?: boolean` |
| `MINIMIZED_WIDTH` | Constant | Collapsed width: `56px` |
| `EXPANDED_WIDTH` | Constant | Expanded width: `224px` |
| `STORAGE_KEY` | Constant | localStorage key for desktop minimized state |

### Behavior by Breakpoint

| Viewport | Behavior | State Persistence |
|----------|----------|-------------------|
| `< md` | Hidden | — |
| `md` (tablet) | Floating overlay, starts minimized | In-memory only |
| `≥ lg` (desktop) | Push layout | localStorage |

### Key Internal Logic

- **`minimized`** — resolves to `tabletMinimized` or `desktopMinimized` based on viewport
- **`transitionsEnabled`** — deferred via `requestAnimationFrame` to prevent flash of wrong width on hydration
- **`isOverlayOpen`** — drives backdrop scrim visibility and `Escape` key dismissal
- **`primaryItems` / `secondaryItems`** — items split by `section !== 'secondary'` filter

## Usage Example

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

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

<NavigationSidebar config={config} disabled={false} />
```