<!-- source-hash: 84f0966556e789258670b58482f3bc27 -->
A client-side animated sidebar component that slides in from either edge of the screen, supporting nested navigation items, dynamic header offset calculation, and animated expand/collapse for sub-menus.

## Key Components

### `SlidingSidebarProps`
| Prop | Type | Description |
|------|------|-------------|
| `config` | `SlidingSidebarConfig` | Full sidebar configuration including `isOpen`, `position`, `items`, `onClose`, `footer`, and `className` |

### Internal State
| State | Purpose |
|-------|---------|
| `expandedItems` | Tracks which nav items have their children visible |
| `mounted` | Guards against SSR hydration mismatches |
| `headerHeight` | Dynamic offset calculated from `<header>` and `[data-announcement-bar]` elements |

### `renderMenuItem(item, level)`
Recursive renderer that handles three item variants:
- **Custom element** — renders `item.element` directly
- **Parent node** — renders a toggle button with animated `AnimatePresence` child list
- **Leaf node** — renders a `Button` that calls `item.onClick?.()` then `config.onClose()`

### Header Height Detection
Uses `ResizeObserver` + `MutationObserver` to dynamically track the combined height of `<header>` and `[data-announcement-bar]`, keeping the sidebar content correctly offset as layout changes.

## Usage Example

```typescript
import { SlidingSidebar } from './sliding-sidebar'
import { useState } from 'react'

function AppShell() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <SlidingSidebar
      config={{
        isOpen,
        onClose: () => setIsOpen(false),
        position: 'left',
        items: [
          {
            id: 'dashboard',
            label: 'Dashboard',
            href: '/dashboard',
            isActive: true,
          },
          {
            id: 'settings',
            label: 'Settings',
            children: [
              { id: 'profile', label: 'Profile', href: '/settings/profile' },
              { id: 'billing', label: 'Billing', href: '/settings/billing' },
            ],
          },
        ],
        footer: <div>v1.0.0</div>,
      }}
    />
  )
}
```

> **Note:** The sidebar is client-only (`"use client"`). It returns `null` until after mount to prevent SSR/hydration mismatches. Nest it inside a layout that also renders the `<header>` element so the offset calculation works correctly.