Navigation Menu

1"use client";
2 
3import { CaretDownIcon } from "@phosphor-icons/react";
4import { cva } from "class-variance-authority";
5import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui";
6import * as React from "react";
7 
8import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
9import { cn } from "@/lib/utils";
10 
11/* Roles: the list bar is borderless adaptive glass; the content and
12   viewport flyouts are bordered + veiled. */
13const LIST_ROLE = {};
14const OVERLAY_ROLE = {
15  border: true,
16  veil: true,
17};
18 
19const NavigationMenu = React.forwardRef<
20  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
21  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root> & {
22    viewport?: boolean;
23  }
24>(({ className, children, viewport = true, ...props }, ref) => (
25  <NavigationMenuPrimitive.Root
26    ref={ref}
27    data-slot="navigation-menu"
28    data-viewport={viewport}
29    className={cn("group/navigation-menu relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
30    {...props}
31  >
32    {children}
33    {viewport && <NavigationMenuViewport />}
34  </NavigationMenuPrimitive.Root>
35));
36NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
37 
38const NavigationMenuList = React.forwardRef<
39  React.ElementRef<typeof NavigationMenuPrimitive.List>,
40  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List> &
41    MaterialAxisProps & {
42      variant?: "default" | "glass";
43    }
44>(({ className, variant = "glass", ...props }, ref) => {
45  const [axes, rest] = splitAxisProps(props);
46  /* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
47  const variants = {
48    default: "group flex flex-1 list-none items-center justify-center space-x-1",
49    glass: "group flex flex-1 list-none items-center justify-center space-x-1 rounded-lg px-2 py-1",
50  };
51 
52  const m = materialSurface(variant === "default" ? null : LIST_ROLE, axes);
53 
54  return (
55    <NavigationMenuPrimitive.List
56      ref={ref}
57      data-slot="navigation-menu-list"
58      data-material={m?.["data-material"]}
59      className={cn(m?.className, variants[variant], className)}
60      {...rest}
61    />
62  );
63});
64NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
65 
66const NavigationMenuItem = React.forwardRef<
67  React.ElementRef<typeof NavigationMenuPrimitive.Item>,
68  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Item>
69>(({ className, ...props }, ref) => (
70// … truncated