Glass Navigation Menu

1'use client'
2 
3import * as React from 'react'
4import { NavigationMenu as NavigationMenuPrimitive } from 'radix-ui'
5import { cva } from 'class-variance-authority'
6import { ChevronDown } from 'lucide-react'
7 
8import { cn } from '@/lib/utils'
9 
10const GlassNavigationMenu = React.forwardRef<
11  React.ComponentRef<typeof NavigationMenuPrimitive.Root>,
12  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
13>(({ className, children, ...props }, ref) => (
14  <NavigationMenuPrimitive.Root
15    ref={ref}
16    className={cn('relative z-10 flex max-w-max flex-1 items-center justify-center', className)}
17    {...props}
18  >
19    {children}
20    <GlassNavigationMenuViewport />
21  </NavigationMenuPrimitive.Root>
22))
23GlassNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
24 
25const GlassNavigationMenuList = React.forwardRef<
26  React.ComponentRef<typeof NavigationMenuPrimitive.List>,
27  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
28>(({ className, ...props }, ref) => (
29  <NavigationMenuPrimitive.List
30    ref={ref}
31    className={cn(
32      'group flex flex-1 list-none items-center justify-center gap-1 rounded-full border border-muted bg-muted p-1 backdrop-blur',
33      className,
34    )}
35    {...props}
36  />
37))
38GlassNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
39 
40const GlassNavigationMenuItem = NavigationMenuPrimitive.Item
41 
42const navigationMenuTriggerStyle = cva(
43  'group inline-flex items-center justify-center rounded-full px-3.5 py-1.5 text-sm font-medium text-muted-foreground dark:text-body transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-[active]:bg-accent data-[active]:text-accent-foreground',
44)
45 
46const GlassNavigationMenuTrigger = React.forwardRef<
47  React.ComponentRef<typeof NavigationMenuPrimitive.Trigger>,
48  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
49>(({ className, children, ...props }, ref) => (
50  <NavigationMenuPrimitive.Trigger
51    ref={ref}
52    className={cn(navigationMenuTriggerStyle(), 'group', className)}
53    {...props}
54  >
55    {children}{' '}
56    <ChevronDown
57      className="relative top-[1px] ml-1 size-3 transition duration-200 group-data-[state=open]:rotate-180"
58      aria-hidden="true"
59    />
60// … truncated