Navigation menu

1import { Icon } from "@/lib/icon";
2import { mdiChevronDown } from "@mdi/js";
3import { cva } from "class-variance-authority";
4import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui";
5import type * as React from "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      aria-label="Navigation menu"
22      className={cn(
23        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
24        className,
25      )}
26      {...props}
27    >
28      {children}
29      {viewport && <NavigationMenuViewport />}
30    </NavigationMenuPrimitive.Root>
31  );
32}
33 
34function NavigationMenuList({
35  className,
36  ...props
37}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
38  return (
39    <NavigationMenuPrimitive.List
40      data-slot="navigation-menu-list"
41      className={cn(
42        "group flex flex-1 list-none items-center justify-center gap-1 bg-background p-1",
43        className,
44      )}
45      {...props}
46    />
47  );
48}
49 
50function NavigationMenuItem({
51  className,
52  ...props
53}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
54  return (
55    <NavigationMenuPrimitive.Item
56      data-slot="navigation-menu-item"
57      className={cn("relative", className)}
58      {...props}
59    />
60  );
61}
62 
63const navigationMenuTriggerStyle = cva(
64  "group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-neutral-fg text-md font-medium hover:bg-neutral-bg hover:text-neutral-fg focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-neutral-fg data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 [&.active]:bg-primary-bg [&.active]:text-primary-fg [&.active]:hover:bg-primary-bg [&.active]:hover:text-primary-fg",
65);
66 
67function NavigationMenuTrigger({
68  className,
69  children,
70  ...props
71}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
72  return (
73    <NavigationMenuPrimitive.Trigger
74      data-slot="navigation-menu-trigger"
75      className={cn(navigationMenuTriggerStyle(), "group", className)}
76      {...props}
77// … truncated