Aurora Navigation Menu

1"use client"
2 
3import * as React from "react"
4import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
5import { ChevronDown } from "lucide-react"
6import { cn } from "@/lib/utils"
7 
8const navigationMenuTriggerStyle = [
9  "group inline-flex h-9 w-max items-center justify-center gap-1 rounded-[8px] border px-3 py-1.5 outline-none transition-[background-color,border-color,box-shadow,color] duration-150",
10  "focus-visible:ring-2 focus-visible:ring-[var(--aurora-focus-ring)] focus-visible:ring-offset-0",
11  "data-[state=open]:shadow-[var(--aurora-active-glow)]",
12].join(" ")
13 
14function NavigationMenuRoot({
15  className,
16  style,
17  children,
18  viewport = false,
19  ...props
20}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
21  viewport?: boolean
22}) {
23  return (
24    <NavigationMenuPrimitive.Root
25      data-slot="navigation-menu"
26      data-viewport={viewport}
27      className={cn("group/navigation-menu relative inline-flex max-w-max flex-col", className)}
28      style={style}
29      {...props}
30    >
31      {children}
32      {viewport ? <NavigationMenuViewport /> : null}
33    </NavigationMenuPrimitive.Root>
34  )
35}
36 
37function NavigationMenuList({
38  className,
39  style,
40  ...props
41}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
42  return (
43    <NavigationMenuPrimitive.List
44      data-slot="navigation-menu-list"
45      className={cn(
46        "flex flex-wrap items-center gap-1 rounded-[var(--aurora-radius-2)] border p-1",
47        className
48      )}
49      style={{
50        background: "var(--aurora-control-surface)",
51        borderColor: "var(--aurora-border-default)",
52        boxShadow: "var(--aurora-highlight-medium)",
53        ...style,
54      }}
55      {...props}
56    />
57  )
58}
59 
60export type NavigationMenuProps = Omit<
61  React.ComponentProps<typeof NavigationMenuPrimitive.Root>,
62  "children"
63> & {
64  children: React.ReactNode
65  viewport?: boolean
66  listClassName?: string
67}
68 
69export interface NavigationMenuItemProps
70  extends React.ComponentProps<typeof NavigationMenuPrimitive.Link> {
71  active?: boolean
72  itemClassName?: string
73}
74 
75function NavigationMenu({
76  children,
77  listClassName,
78  viewport = false,
79  ...props
80}: NavigationMenuProps) {
81  return (
82    <NavigationMenuRoot viewport={viewport} {...props}>
83      <NavigationMenuList className={listClassName}>{children}</NavigationMenuList>
84    </NavigationMenuRoot>
85  )
86}
87 
88function NavigationMenuItem({
89  active = false,
90  className,
91  itemClassName,
92  children,
93  style,
94  ...props
95// … truncated