Menubar

<div role="menubar" data-slot="menubar" x-data="{ active: null }" x-on:keydown.escape="active = null" x-on:click.outside="active = null"
  {{ attributes.cn("flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-xs") }}>{{ slot }}</div>

@props({'value': ''})
<div data-slot="menubar-menu" x-data="{ value: '{{ value }}' || Math.random().toString(36).slice(2) }" {{ attributes.cn("relative") }}>{{ slot }}</div>

<button type="button" role="menuitem" data-slot="menubar-trigger" x-on:click="active = active === value ? null : value" x-on:mouseenter="active && (active = value)"
  x-bind:aria-expanded="active === value" x-bind:data-state="active === value ? 'open' : 'closed'" {{ attributes.cn("flex cursor-pointer items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none hover:bg-accent focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground") }}>{{ slot }}</button>

<div role="menu" data-slot="menubar-content" x-show="active === value" x-cloak x-on:click="$event.target.closest('[data-slot=menubar-item]') && (active = null)"
  x-transition:enter="duration-100 ease-out" x-transition:enter-start="scale-95 opacity-0" x-transition:enter-end="scale-100 opacity-100"
  {{ attributes.cn("absolute top-full left-0 z-50 mt-2 min-w-[12rem] origin-top-left overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md") }}>{{ slot }}</div>

@props({'href': None, 'variant': 'default', 'inset': False})
<a role="menuitem" data-slot="menubar-item" @if(href)href="{{ href }}"@endif tabindex="0" {{ attributes.cn(
    "relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
    {'default': '', 'destructive': 'text-destructive hover:bg-destructive/10 focus:bg-destructive/10 dark:hover:bg-destructive/20'}[variant],
    {'True': 'pl-8', 'False': ''}[str(bool(inset))],
) }}>{{ slot }}</a>

<div role="separator" data-slot="menubar-separator" {{ attributes.cn("-mx-1 my-1 h-px bg-border") }}></div>

<div data-slot="menubar-label" {{ attributes.cn("px-2 py-1.5 text-sm font-medium") }}>{{ slot }}</div>

<span data-slot="menubar-shortcut" {{ attributes.cn("ml-auto text-xs tracking-widest text-muted-foreground") }}>{{ slot }}</span>