Glass Menubar

1'use client'
2 
3import * as React from 'react'
4import { Menubar as MenubarPrimitive } from 'radix-ui'
5import { Check, ChevronRight, Circle } from 'lucide-react'
6 
7import { cn } from '@/lib/utils'
8 
9const GlassMenubar = React.forwardRef<
10  React.ComponentRef<typeof MenubarPrimitive.Root>,
11  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
12>(({ className, ...props }, ref) => (
13  <MenubarPrimitive.Root
14    ref={ref}
15    className={cn(
16      'flex items-center gap-1 rounded-full border border-muted bg-muted p-1 backdrop-blur',
17      className,
18    )}
19    {...props}
20  />
21))
22GlassMenubar.displayName = MenubarPrimitive.Root.displayName
23 
24const GlassMenubarMenu = MenubarPrimitive.Menu
25 
26const GlassMenubarGroup = MenubarPrimitive.Group
27 
28const GlassMenubarPortal = MenubarPrimitive.Portal
29 
30const GlassMenubarSub = MenubarPrimitive.Sub
31 
32const GlassMenubarRadioGroup = MenubarPrimitive.RadioGroup
33 
34const GlassMenubarTrigger = React.forwardRef<
35  React.ComponentRef<typeof MenubarPrimitive.Trigger>,
36  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
37>(({ className, ...props }, ref) => (
38  <MenubarPrimitive.Trigger
39    ref={ref}
40    className={cn(
41      'flex cursor-default select-none items-center rounded-full px-3 py-1.5 text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
42      className,
43    )}
44    {...props}
45  />
46))
47GlassMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
48 
49const GlassMenubarSubTrigger = React.forwardRef<
50  React.ComponentRef<typeof MenubarPrimitive.SubTrigger>,
51  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
52    inset?: boolean
53  }
54>(({ className, inset, children, ...props }, ref) => (
55  <MenubarPrimitive.SubTrigger
56    ref={ref}
57    className={cn(
58      'flex cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-inset focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
59      inset && 'pl-8',
60      className,
61    )}
62    {...props}
63  >
64    {children}
65    <ChevronRight className="ml-auto" />
66  </MenubarPrimitive.SubTrigger>
67))
68GlassMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
69 
70// … truncated