Navigation Menu

1"use client";
2 
3import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
4import { ChevronDown } from "lucide-react";
5import { forwardRef } from "react";
6import { cn } from "@/lib/utils";
7import { glass } from "@/lib/glass";
8 
9export const NavigationMenu = forwardRef<
10  HTMLElement,
11  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
12>(({ className, ...props }, ref) => (
13  <NavigationMenuPrimitive.Root
14    ref={ref}
15    className={cn(
16      "relative z-10 flex max-w-max flex-1 items-center justify-center",
17      className,
18    )}
19    {...props}
20  />
21));
22NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
23 
24export const NavigationMenuList = forwardRef<
25  HTMLUListElement,
26  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
27>(({ className, ...props }, ref) => (
28  <NavigationMenuPrimitive.List
29    ref={ref}
30    className={cn(
31      "group flex flex-1 list-none items-center justify-center gap-1",
32      className,
33    )}
34    {...props}
35  />
36));
37NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
38 
39export const NavigationMenuItem = NavigationMenuPrimitive.Item;
40 
41export const NavigationMenuTrigger = forwardRef<
42  HTMLButtonElement,
43  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
44>(({ className, children, ...props }, ref) => (
45  <NavigationMenuPrimitive.Trigger
46    ref={ref}
47    className={cn(
48      "group inline-flex h-10 items-center justify-center gap-1 rounded-full px-4 py-2 text-sm font-medium transition-colors",
49      "outline-none hover:bg-black/[0.05] dark:hover:bg-white/10 focus:bg-black/[0.05] dark:focus:bg-white/10 data-[state=open]:bg-black/[0.06] dark:data-[state=open]:bg-white/15",
50      className,
51    )}
52    {...props}
53  >
54    {children}{" "}
55    <ChevronDown
56      className="relative top-[1px] size-3 transition duration-200 group-data-[state=open]:rotate-180"
57      aria-hidden
58    />
59  </NavigationMenuPrimitive.Trigger>
60));
61NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
62 
63export const NavigationMenuContent = forwardRef<
64  HTMLDivElement,
65  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
66>(({ className, ...props }, ref) => (
67  <NavigationMenuPrimitive.Content
68    ref={ref}
69    className={cn(
70      "left-0 top-0 w-full p-2 md:absolute md:w-auto",
71// … truncated