Storybook stories for the `Header` navigation component, covering dropdown behavior, SEO link visibility, auto-hide, and Mingo AI integration scenarios. ## Key Components | Export | Type | Description | |---|---|---| | `Default` | `Story` | Standard header with dropdown navigation and auto-hide enabled | | `DropdownOpen` | `Story` | Header with the first dropdown programmatically opened on mount | | `SeoLinksAlwaysInDom` | `Story` | Live demo proving dropdown `` links stay in the DOM when collapsed | | `FixedHeader` | `Story` | Header with `autoHide: false`, stays fixed while scrolling | | `WithMingoAi` | `Story` | Header with the Mingo AI launcher button enabled | | `baseNavigation` | `HeaderConfig['navigation']` | Shared nav fixture with OpenFrame, OpenMSP, and Company items | ## Usage Example ```typescript // Render the default header in a Next.js page import { Header } from '../components/navigation/header'; import { FlamingoLogo } from '../components/icons'; import { Button } from '../components/ui/button'; import type { HeaderConfig } from '../types/navigation'; const config: HeaderConfig = { logo: { element: (
Flamingo
), href: '/', }, navigation: { position: 'center', items: [ { id: 'company', label: 'Company', href: '/company' }, ], }, actions: { right: [ , ], }, autoHide: true, mobile: { enabled: true, onToggle: () => {} }, }; export default function Page() { return
; } ``` ## SEO Notes Dropdown child links are always rendered in the DOM and hidden via CSS `visibility: hidden` rather than conditional rendering. This ensures crawlers index all navigation links regardless of dropdown state. The `SeoLinksAlwaysInDom` story demonstrates this with a live link counter that remains constant whether dropdowns are open or closed.