Menubar

1"use client";
2 
3import * as MenubarPrimitive from "@radix-ui/react-menubar";
4import { Check, ChevronRight, Circle } from "lucide-react";
5import { forwardRef } from "react";
6import { cn } from "@/lib/utils";
7import { glass, glassBase, textOnGlass } from "@/lib/glass";
8import {
9  menuContentClass,
10  menuItemClass,
11  menuLabelClass,
12  menuSeparatorClass,
13} from "@/lib/menu-classes";
14 
15export const Menubar = forwardRef<
16  HTMLDivElement,
17  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
18>(({ className, ...props }, ref) => (
19  <MenubarPrimitive.Root
20    ref={ref}
21    className={cn(
22      glassBase,
23      textOnGlass,
24      "relative flex h-11 items-center gap-1 rounded-full border border-black/[0.08] px-1.5 shadow-sm dark:border-white/[0.25]",
25      className,
26    )}
27    {...props}
28  />
29));
30Menubar.displayName = MenubarPrimitive.Root.displayName;
31 
32export const MenubarMenu: typeof MenubarPrimitive.Menu = MenubarPrimitive.Menu;
33 
34export const MenubarTrigger = forwardRef<
35  HTMLButtonElement,
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 outline-none",
42      "data-[state=open]:bg-black/[0.06] dark:data-[state=open]:bg-white/15 data-[highlighted]:bg-black/[0.05] dark:data-[highlighted]:bg-white/10",
43      className,
44    )}
45    {...props}
46  />
47));
48MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
49 
50export const MenubarContent = forwardRef<
51  HTMLDivElement,
52  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
53>(
54  (
55    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
56    ref,
57  ) => (
58    <MenubarPrimitive.Portal>
59      <MenubarPrimitive.Content
60        ref={ref}
61        align={align}
62        alignOffset={alignOffset}
63        sideOffset={sideOffset}
64        className={cn(
65          glass,
66          menuContentClass,
67          "animate-in fade-in-0 zoom-in-95",
68          className,
69        )}
70        {...props}
71      />
72    </MenubarPrimitive.Portal>
73  ),
74);
75MenubarContent.displayName = MenubarPrimitive.Content.displayName;
76 
77export const MenubarItem = forwardRef<
78  HTMLDivElement,
79  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
80    inset?: boolean;
81  }
82>(({ className, inset, ...props }, ref) => (
83  <MenubarPrimitive.Item
84    ref={ref}
85// … truncated