navigation-menu

1import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
2import { cva } from "class-variance-authority"
3 
4import { cn } from "@/registry/base-vega/lib/utils"
5import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
6 
7function NavigationMenu({
8  align = "start",
9  className,
10  children,
11  ...props
12}: NavigationMenuPrimitive.Root.Props &
13  Pick<NavigationMenuPrimitive.Positioner.Props, "align">) {
14  return (
15    <NavigationMenuPrimitive.Root
16      data-slot="navigation-menu"
17      className={cn(
18        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
19        className
20      )}
21      {...props}
22    >
23      {children}
24      <NavigationMenuPositioner align={align} />
25    </NavigationMenuPrimitive.Root>
26  )
27}
28 
29function NavigationMenuList({
30  className,
31  ...props
32}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {
33  return (
34    <NavigationMenuPrimitive.List
35      data-slot="navigation-menu-list"
36      className={cn(
37        "group flex flex-1 list-none items-center justify-center gap-0",
38        className
39      )}
40      {...props}
41    />
42  )
43}
44 
45function NavigationMenuItem({
46  className,
47  ...props
48}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {
49  return (
50    <NavigationMenuPrimitive.Item
51      data-slot="navigation-menu-item"
52      className={cn("relative", className)}
53      {...props}
54    />
55  )
56}
57 
58const navigationMenuTriggerStyle = cva(
59  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
60)
61 
62function NavigationMenuTrigger({
63  className,
64  children,
65  ...props
66}: NavigationMenuPrimitive.Trigger.Props) {
67  return (
68    <NavigationMenuPrimitive.Trigger
69      data-slot="navigation-menu-trigger"
70      className={cn(navigationMenuTriggerStyle(), "group", className)}
71      {...props}
72    >
73      {children}{" "}
74      <IconPlaceholder
75        lucide="ChevronDownIcon"
76        tabler="IconChevronDown"
77        hugeicons="ArrowDown01Icon"
78        phosphor="CaretDownIcon"
79        remixicon="RiArrowDownSLine"
80// … truncated