MicroClub Navigation Menu

1import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';
2import { cva } from 'class-variance-authority';
3import { ChevronDownIcon } from 'lucide-react';
4 
5import { cn } from '@/lib/utils';
6 
7function McNavigationMenu({
8  align = 'start',
9  className,
10  children,
11  ...props
12}: NavigationMenuPrimitive.Root.Props & Pick<NavigationMenuPrimitive.Positioner.Props, 'align'>) {
13  return (
14    <NavigationMenuPrimitive.Root
15      data-slot="navigation-menu"
16      className={cn(
17        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
18        className
19      )}
20      {...props}
21    >
22      {children}
23      <McNavigationMenuPositioner align={align} />
24    </NavigationMenuPrimitive.Root>
25  );
26}
27 
28function McNavigationMenuList({
29  className,
30  ...props
31}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {
32  return (
33    <NavigationMenuPrimitive.List
34      data-slot="navigation-menu-list"
35      className={cn(
36        'group flex flex-1 list-none items-center justify-evenly gap-1 ring-1 ring-inset ring-border bg-background rounded-md ',
37        className
38      )}
39      {...props}
40    />
41  );
42}
43 
44function McNavigationMenuItem({
45  className,
46  ...props
47}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {
48  return (
49    <NavigationMenuPrimitive.Item
50      data-slot="navigation-menu-item"
51      className={cn('relative', className)}
52      {...props}
53    />
54  );
55}
56 
57const navigationMenuTriggerStyle = cva(
58  'group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center paragraph-sm font-medium transition-all outline-none focus-visible:bg-accent focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-accent data-popup-open:hover:bg-accent data-open:bg-accent/50 data-open:hover:bg-accent data-open:focus:bg-accent data-popup-open:shadow-[inset_0_0_0_2px_var(--border),0_0_0_2px_var(--border)] data-open:shadow-[inset_0_0_0_2px_var(--border),0_0_0_2px_var(--border)] data-popup-open:hover:shadow-[inset_0_0_0_2px_var(--border),0_0_0_2px_var(--border)] data-popup-open:hover:bg-accent px-4 py-2 rounded-md'
59);
60 
61function McNavigationMenuTrigger({
62  className,
63  children,
64  ...props
65}: NavigationMenuPrimitive.Trigger.Props) {
66  return (
67    <NavigationMenuPrimitive.Trigger
68      data-slot="navigation-menu-trigger"
69      className={cn(
70        navigationMenuTriggerStyle(),
71        'group',
72// … truncated