Menubar

1import * as React from 'react'
2import * as MenubarPrimitive from '@radix-ui/react-menubar'
3import { Check, ChevronRight, Circle } from 'lucide-react'
4import { cn } from '@/lib/utils'
5 
6const MenubarMenu = MenubarPrimitive.Menu
7const MenubarGroup = MenubarPrimitive.Group
8const MenubarPortal = MenubarPrimitive.Portal
9const MenubarSub = MenubarPrimitive.Sub
10const MenubarRadioGroup = MenubarPrimitive.RadioGroup
11 
12const Menubar = React.forwardRef<
13  React.ElementRef<typeof MenubarPrimitive.Root>,
14  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
15>(({ className, ...props }, ref) => (
16  <MenubarPrimitive.Root
17    ref={ref}
18    className={cn(
19      'flex h-10 items-center gap-1 border-3 border-foreground bg-background p-1 shadow-[4px_4px_0px_hsl(var(--shadow-color))]',
20      className
21    )}
22    {...props}
23  />
24))
25Menubar.displayName = MenubarPrimitive.Root.displayName
26 
27const MenubarTrigger = React.forwardRef<
28  React.ElementRef<typeof MenubarPrimitive.Trigger>,
29  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
30>(({ className, ...props }, ref) => (
31  <MenubarPrimitive.Trigger
32    ref={ref}
33    className={cn(
34      'flex cursor-default select-none items-center px-3 py-1 text-sm font-bold uppercase tracking-wide outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
35      className
36    )}
37    {...props}
38  />
39))
40MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
41 
42const MenubarSubTrigger = React.forwardRef<
43  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
44  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
45    inset?: boolean
46  }
47>(({ className, inset, children, ...props }, ref) => (
48  <MenubarPrimitive.SubTrigger
49    ref={ref}
50    className={cn(
51      'flex cursor-default select-none items-center px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
52      inset && 'pl-8',
53      className
54    )}
55    {...props}
56  >
57    {children}
58    <ChevronRight className="ml-auto h-4 w-4 stroke-[3]" />
59  </MenubarPrimitive.SubTrigger>
60))
61MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
62 
63const MenubarSubContent = React.forwardRef<
64  React.ElementRef<typeof MenubarPrimitive.SubContent>,
65  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
66>(({ className, ...props }, ref) => (
67  <MenubarPrimitive.SubContent
68    ref={ref}
69    className={cn(
70// … truncated