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";
6 
7import { cn } from "@/lib/utils";
8 
9function NavigationMenu({
10  className,
11  children,
12  viewport = true,
13  ...props
14}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
15  viewport?: boolean;
16}) {
17  return (
18    <NavigationMenuPrimitive.Root
19      data-slot="navigation-menu"
20      data-viewport={viewport}
21      className={cn(
22        "relative z-10 flex max-w-max flex-1 items-center justify-center",
23        className,
24      )}
25      {...props}
26    >
27      {children}
28      {viewport && <NavigationMenuViewport />}
29    </NavigationMenuPrimitive.Root>
30  );
31}
32const NavigationMenuList = React.forwardRef<
33  React.ElementRef<typeof NavigationMenuPrimitive.List>,
34  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
35>(({ className, ...props }, ref) => (
36  <NavigationMenuPrimitive.List
37    ref={ref}
38    data-slot="navigation-menu-list"
39    className={cn(
40      "group flex flex-1 list-none items-center justify-center gap-1 rounded-2xl border border-foreground/10 bg-background/70 p-1.5 shadow-[inset_0_1px_0_color-mix(in_oklch,var(--background)_75%,transparent)]",
41      className,
42    )}
43    {...props}
44  />
45));
46NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
47const NavigationMenuItem = NavigationMenuPrimitive.Item;
48 
49const navigationMenuTriggerStyle =
50  "group inline-flex h-9.5 w-max items-center justify-center rounded-xl bg-transparent px-4 py-2 text-sm font-semibold outline-none transition-[color,background-color] hover:bg-foreground/[.055] focus:bg-foreground/[.055] data-[state=open]:bg-primary/10 data-[state=open]:text-primary disabled:pointer-events-none disabled:opacity-45";
51 
52function NavigationMenuTrigger({
53  className,
54  children,
55  ...props
56}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
57  return (
58    <NavigationMenuPrimitive.Trigger
59      data-slot="navigation-menu-trigger"
60      className={cn(navigationMenuTriggerStyle, className)}
61      {...props}
62    >
63      {children}
64      <ChevronDown
65        className="relative top-px ml-1 size-3 transition-transform duration-300 group-data-[state=open]:rotate-180"
66        aria-hidden
67      />
68    </NavigationMenuPrimitive.Trigger>
69  );
70}
71function NavigationMenuContent({
72  className,
73  ...props
74}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
75  return (
76// … truncated