"use client"; import * as React from "react"; import HamburgerIcon from "@/components/registry/graphics/icons/hamburger-icon"; import { NavigationMenu, NavigationMenuList, } from "@/components/registry/primitives/core/navigation-menu"; import { cn } from "@/lib/registry/cn"; /** When orientation is "vertical", Navigation block can render a compact list for the drawer. */ export const HeaderNavContext = React.createContext< { orientation: "horizontal" | "vertical" } | undefined >(undefined); /** * Shell for a page header bar. Use HeaderInner for the inner container * and HeaderStart, HeaderNav, HeaderEnd for the three zones. * On mobile, only HeaderStart stays in the bar; HeaderNav and HeaderEnd * move into a hamburger drawer. */ function Header({ className, ...props }: React.ComponentProps<"header">) { return (

); } function HeaderStart({ className, ...props }: React.ComponentProps<"div">) { return (

); } function HeaderNav({ className, children, orientation = "horizontal", ...props }: React.ComponentProps<"div"> & { /** Vertical for drawer/mobile menu; horizontal for desktop bar. */ orientation?: "horizontal" | "vertical"; }) { const isVertical = orientation === "vertical"; return (

{children}

); } function HeaderEnd({ className, orientation = "horizontal", ...props }: React.ComponentProps<"div"> & { /** Vertical for drawer/mobile menu; horizontal for desktop bar. */ orientation?: "horizontal" | "vertical"; }) { const isVertical = orientation === "vertical"; return (

); } function HeaderInner({ className, children, ...props }: React.ComponentProps<"div">) { const [isDrawerOpen, setIsDrawerOpen] = React.useState(false); const childrenArray = React.Children.toArray(children); const startChild = childrenArray.find( (c): c is React.ReactElement => React.isValidElement(c) && c.type === HeaderStart, ); const navChild = childrenArray.find( (c): c is React.ReactElement<{ orientation?: "horizontal" | "vertical" }> => React.isValidElement(c) && c.type === HeaderNav, ); const endChild = childrenArray.find( (c): c is React.ReactElement<{ orientation?: "horizontal" | "vertical" }> => React.isValidElement(c) && c.type === HeaderEnd, ); const closeDrawer = React.useCallback(() => setIsDrawerOpen(false), []); const toggleDrawer = React.useCallback(() => setIsDrawerOpen((v) => !v), []); return ( <>

{startChild}

{ if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleDrawer(); } }} aria-label={isDrawerOpen ? "Close menu" : "Open menu"} aria-controls="header-drawer" aria-expanded={isDrawerOpen} />

{navChild ? (

{navChild}

) : null} {endChild ? (

{endChild}

) : null}

{/* Mobile drawer: slides in from start (left); nav then separator then end, all at top */}

{/* biome-ignore lint/a11y/noStaticElementInteractions: drawer content panel, not a control — onClick closes the drawer when a real nav link/button inside is activated (event bubbles up), and onKeyDown provides the keyboard Escape-to-close. No semantic element models "panel that dismisses on inner activation". */}

e.key === "Escape" && closeDrawer()} >

{startChild ? (

{startChild}

) : null} {navChild ? React.cloneElement(navChild, { key: "drawer-nav", orientation: "vertical" as const, }) : null} {navChild && endChild ? (

) : null} {endChild ? React.cloneElement(endChild, { key: "drawer-end", orientation: "vertical" as const, }) : null}

{/* Backdrop — clickable overlay that closes the drawer. Hidden from AT (the drawer itself owns Escape-to-close); no role/tabIndex needed since it never receives focus. */}

Header Primitive

Showcase

Header Primitive