Mobile Navigation Drawer

1'use client'
2 
3import * as React from 'react'
4 
5import { Button } from '@/components/button'
6import { PushMenu, type PushMenuItem } from '@/components/push-menu'
7import { Sheet, SheetContent, SheetTitle, SheetTrigger } from '@/components/sheet'
8import { IconMenu } from '@/icons/menu'
9 
10export type MobileNavProps = {
11  /** The menu tree, passed straight to `PushMenu`. Item ids must be unique. */
12  navigation: PushMenuItem[]
13  /**
14   * The app's current pathname. Leaf links whose `href` matches get
15   * `aria-current="page"` and the active treatment (see `PushMenu`).
16   */
17  currentHref?: string
18  /**
19   * Drawer title: names the dialog for assistive tech (via a visually-hidden
20   * `SheetTitle`) and is shown by `PushMenu` as its root level heading.
21   * Defaults to `"Menu"`.
22   */
23  title?: string
24  /** Controlled open state. Leave unset for uncontrolled. */
25  open?: boolean
26  /** Initial open state when uncontrolled. Defaults to `false`. */
27  defaultOpen?: boolean
28  /**
29   * Fired whenever the drawer opens or closes — trigger click, Escape,
30   * backdrop click, the menu's own close button, and leaf-link clicks all
31   * funnel through here. Pair with `open` for a controlled drawer.
32   */
33  onOpenChange?: (open: boolean) => void
34  /** Extra drawer content rendered below the menu — a sign-in link, say. */
35  children?: React.ReactNode
36}
37 
38/**
39 * Mobile navigation drawer: a hamburger button that opens a left-side sheet
40 * containing the multi-level `PushMenu`. A registry block — copy the source
41 * and adapt it — composed entirely from published components: `Button`
42 * (trigger), `Sheet` (the drawer, on the Base UI dialog primitive) and
43 * `PushMenu` (the drill-down menu).
44 *
45 * Accessibility contract:
46 *
47 * - Base UI's dialog provides the modal behaviour — focus trap, scroll lock,
48 *   Escape and backdrop dismissal, and focus return to the trigger on close.
49 *   Nothing is hand-rolled (the nswds-app source hand-assembled this from
50 *   Headless UI Dialog + fixed-position divs).
51 * - The dialog's accessible name comes from a visually-hidden `SheetTitle`.
52 *   It is `sr-only` because `PushMenu` already renders a visible title in its
53 *   header row: a second visible "Menu" heading would duplicate it, but the
54 *   per-level heading can't name the dialog either — it changes as the user
55 *   drills, and it isn't wired to the popup's `aria-labelledby`. Same
56 *   arrangement as sidebar-style sheets elsewhere in the shadcn ecosystem.
57// … truncated