<!-- source-hash: b45b42d2833c6191aa9bdecbae716475 -->
Renders a sticky, auto-hiding site header with configurable logo, navigation items, dropdown menus, and action slots for the OpenFrame platform shell.

## Key Components

### `Header`
The main exported component. Accepts a `HeaderConfig` object and optional `platform` string to render a full application header with:

- **Auto-hide on scroll** — hides when scrolling down past 50px, re-appears on scroll up (opt-in via `config.autoHide`)
- **Dropdown menus** — custom-built dropdowns using `inert` for accessibility-safe show/hide (avoids `aria-hidden` focus retention bugs)
- **Click-outside / Escape dismissal** — event listeners attached only while a dropdown is open
- **Navigation rendering** — `renderNavigationItem` handles four cases: custom elements, dropdown parents, link/action buttons, and plain action buttons

### Exported Types

| Export | Description |
|---|---|
| `HeaderProps` | `{ config: HeaderConfig; platform?: string }` |
| `HeaderConfig` | Re-exported from `../../types/navigation` for consumer convenience |

## Usage Example

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

const config: HeaderConfig = {
  logo: {
    href: '/',
    element: <img src="/logo.svg" alt="Flamingo" />,
  },
  autoHide: true,
  backgroundColor: 'bg-ods-card',
  navigation: {
    position: 'center',
    items: [
      { id: 'docs', label: 'Docs', href: '/docs' },
      {
        id: 'community',
        label: 'Community',
        children: [
          { id: 'slack', label: 'Slack', href: 'https://www.openmsp.ai/', isExternal: true },
        ],
      },
    ],
  },
  mingo: { enabled: true },
}

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

> **Accessibility note:** Dropdowns use the HTML `inert` attribute (React 19 native) instead of `aria-hidden` to fully remove hidden content from the tab order and accessibility tree simultaneously.