Navigation menu

1"use client"
2
3import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
4import { cva } from "class-variance-authority"
5import { ChevronDown } from "lucide-react"
6
7import * as React from "react"
8
9import { cn } from "@/lib/utils"
10
11function NavigationMenu({
12  className,
13  children,
14  viewport = true,
15  ...props
16}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
17  viewport?: boolean
18}) {
19  return (
20    <NavigationMenuPrimitive.Root
21      data-slot="navigation-menu"
22      data-viewport={viewport}
23      className={cn(
24        "relative z-10 flex max-w-max rounded-base font-heading border-border border-2 p-1 bg-main flex-1 items-center justify-center",
25        className,
26      )}
27      {...props}
28    >
29      {children}
30      {viewport && <NavigationMenuViewport />}
31    </NavigationMenuPrimitive.Root>
32  )
33}
34
35function NavigationMenuList({
36  className,
37  ...props
38}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
39  return (
40    <NavigationMenuPrimitive.List
41      data-slot="navigation-menu-list"
42      className={cn(
43        "group flex flex-1 list-none items-center font-heading justify-center space-x-1",
44        className,
45      )}
46      {...props}
47    />
48  )
49}
50
51function NavigationMenuItem({
52  className,
53  ...props
54}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
55  return (
56    <NavigationMenuPrimitive.Item
57      data-slot="navigation-menu-item"
58      className={cn("relative", className)}
59      {...props}
60    />
61  )
62}
63
64const navigationMenuTriggerStyle = cva(
65  "group inline-flex h-10 w-max items-center justify-center text-main-foreground rounded-base bg-main px-4 py-2 text-sm font-heading transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50",
66)
67
68function NavigationMenuTrigger({
69  className,
70  children,
71  ...props
72}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
73  return (
74    <NavigationMenuPrimitive.Trigger
75      data-slot="navigation-menu-trigger"
76      className={cn(navigationMenuTriggerStyle(), "group", className)}
77      {...props}
78    >
79      {children}{" "}
80      <ChevronDown
81        className="relative top-[1px] ml-2 size-4 font-heading transition duration-200 group-data-[state=open]:rotate-180"
82        aria-hidden="true"
83      />
84    </NavigationMenuPrimitive.Trigger>
85  )
86}
87
88function NavigationMenuContent({
89  className,
90  ...props
91// … truncated