Main Navigation

1'use client'
2 
3import { cva, type VariantProps } from 'class-variance-authority'
4import React from 'react'
5 
6import { IconEast } from '@/icons/east'
7import { cn } from '@/lib/utils'
8 
9import {
10  NavigationMenu,
11  NavigationMenuContent,
12  NavigationMenuItem,
13  NavigationMenuLink,
14  NavigationMenuList,
15  NavigationMenuTrigger,
16} from '@/components/navigation-menu'
17 
18/**
19 * Surface colours the main navigation can be themed with — exactly the
20 * Footer's thirteen-name vocabulary, so a service that themes its footer
21 * `primary-800` writes the same word here. Each name is the LIGHT-mode
22 * surface; dark mode deepens it onto the same family's dark steps (see the
23 * `color` variants below), so `color` expresses tonal weight rather than a
24 * literal colour.
25 *
26 * The bar's text/background pairs are identical to the Footer's, so its
27 * contrast conclusions carry over verbatim: every light pair clears WCAG 2.2
28 * AA (1.4.3, 4.5:1) for the bar's text and 11 of the 13 also clear AAA
29 * (1.4.6, 7:1). The two AA-only pairs are `primary-600` (4.57:1) and
30 * `accent-600` (5.18:1), both with white ink; prefer the `-800` steps when a
31 * service is held to AAA. In dark mode all thirteen clear AAA (worst 13.6:1).
32 *
33 * The mega panels always render on the house popup surface (`bg-popover`),
34 * matching the nswds-app source where every dropdown was white regardless of
35 * bar colour — only the panel's accent ink follows the colour family.
36 */
37const mainNavColors = [
38  'primary-800',
39  'primary-600',
40  'primary-400',
41  'primary-200',
42  'grey-800',
43  'grey-600',
44  'grey-400',
45  'grey-200',
46  'accent-800',
47  'accent-600',
48  'accent-400',
49  'accent-200',
50  'white',
51] as const
52 
53type MainNavColor = (typeof mainNavColors)[number]
54 
55// Shared by cva's defaultVariants, the data-color attribute and the panel
56// variant lookup, so the three can't drift apart.
57const DEFAULT_MAIN_NAV_COLOR: MainNavColor = 'white'
58 
59const mainNavVariants = cva(
60  [
61    'w-full',
62    // Every derived colour on the bar resolves from a single --main-nav-ink
63    // token, so a colour variant only has to declare the surface utilities and
64    // that one value — this replaces the nswds-app source's hand-written
65    // 13-variant × 8-slot style table. The border derivation is written
66    // literally here (once) rather than per-variant: Tailwind scans source
67    // text for class names, so a template-built arbitrary property would
68    // never be emitted. Hover/active halos are not derived here — the
69// … truncated