<!-- source-hash: 1a8c2c67117a2cb265b878e7d99e1a25 -->
A responsive, sticky navigation header component with auto-hide on scroll, dropdown menus, and configurable layout zones (logo, navigation, actions).

## Key Components

### `Header`
The primary exported component that renders a full-width sticky header. Accepts a `HeaderConfig` object to control all visual and behavioral aspects.

**Props:**
| Prop | Type | Description |
|------|------|-------------|
| `config` | `HeaderConfig` | Full layout/behavior configuration |
| `platform` | `string` | Optional platform identifier |

### Behaviors

- **Auto-hide on scroll** — Hides when scrolling down past 50px, reappears on scroll up. Controlled via `config.autoHide`.
- **Dropdown menus** — Custom-built dropdowns using `inert` (not `aria-hidden`) for proper a11y/focus management. Closes on outside click or `Escape`.
- **Mobile menu toggle** — Shows a hamburger icon button on small screens, hidden on `md+` breakpoints.

### Layout Zones
| Zone | Description |
|------|-------------|
| Left | Logo link + optional `config.actions.left` slot |
| Center/Right | Navigation items (positioned via `config.navigation.position`) |
| Right | Desktop action slot + mobile menu toggle |

## Usage Example

```typescript
import { Header, HeaderConfig } from './header'

const config: HeaderConfig = {
  logo: {
    href: '/',
    element: <img src="/logo.svg" alt="Flamingo" />,
  },
  navigation: {
    position: 'center',
    items: [
      { id: 'docs', label: 'Docs', href: '/docs' },
      {
        id: 'products',
        label: 'Products',
        children: [
          { id: 'openframe', label: 'OpenFrame', href: '/openframe' },
          { id: 'mingo', label: 'Mingo AI', href: '/mingo' },
        ],
      },
    ],
  },
  actions: {
    right: <Button href="/login">Sign In</Button>,
  },
  autoHide: true,
  mobile: { enabled: true, onToggle: () => setMenuOpen(v => !v) },
}

export default function Layout() {
  return <Header config={config} />
}
```