Navigation menu

<nav data-slot="navigation-menu" x-data="{ active: null, timer: null, show(v) { clearTimeout(this.timer); this.active = v }, hide() { this.timer = setTimeout(() => this.active = null, 150) } }"
  x-on:keydown.escape="active = null" x-on:click.outside="active = null" x-on:mouseleave="hide()"
  {{ attributes.cn("relative flex max-w-max flex-1 items-center justify-center") }}>{{ slot }}</nav>

<ul data-slot="navigation-menu-list" {{ attributes.cn("group flex flex-1 list-none items-center justify-center gap-1") }}>{{ slot }}</ul>

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

<button type="button" data-slot="navigation-menu-trigger" x-on:click="active === value ? (active = null) : show(value)" x-on:mouseenter="show(value)"
  x-bind:aria-expanded="active === value" x-bind:data-state="active === value ? 'open' : 'closed'" {{ attributes.cn("group inline-flex h-9 w-max cursor-pointer items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground") }}>{{ slot }}<svg class="relative top-px ml-1 size-3 transition duration-300" x-bind:class="{ 'rotate-180': active === value }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>

@props({'align': 'start'})
<div data-slot="navigation-menu-content" x-show="active === value" x-cloak x-on:mouseenter="show(value)"
  x-transition:enter="duration-150 ease-out" x-transition:enter-start="opacity-0 -translate-y-1" x-transition:enter-end="opacity-100 translate-y-0"
  {{ attributes.cn(
    "absolute top-full z-50 mt-1.5 w-max overflow-hidden rounded-md border bg-popover p-2 text-popover-foreground shadow-md",
    {'start': 'left-0', 'center': 'left-1/2 -translate-x-1/2', 'end': 'right-0'}[align],
  ) }}>{{ slot }}</div>

@props({'href': '#', 'active': False})
<a href="{{ href }}" data-slot="navigation-menu-link" data-active="{{ str(bool(active)).lower() }}" @if(active)aria-current="page"@endif {{ attributes.cn("flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground [&_svg:not([class*='size-'])]:size-4") }}>{{ slot }}</a>