Add Alpine.js menu component

resources/views/components/menu/button.blade.php

@@ -0,0 +1,8 @@
+<button
+    x-ref="button"
+    @click="menuOpen = !menuOpen"
+    @keydown.escape="menuOpen = false"
+    class="flex items-center"
+>
+    {{ $slot }}
+</button>

resources/views/components/menu/close.blade.php

@@ -0,0 +1,3 @@
+<div x-on:click="menuOpen = false">
+    {{ $slot }}
+</div>

resources/views/components/menu/index.blade.php

@@ -0,0 +1,3 @@
+<div x-data="{ menuOpen: false }" class="relative">
+    {{ $slot }}
+</div>

resources/views/components/menu/item.blade.php

@@ -0,0 +1,10 @@
+<div>
+    <button
+        class="flex items-center w-full gap-2 px-3 py-1 text-sm text-left transition-colors rounded hover:bg-light-base-400 dark:hover:bg-base-700 text-light-base-950 dark:text-base-50"
+        {{ $attributes->merge([
+            'type' => 'button',
+        ]) }}
+    >
+        {{ $slot }}
+    </button>
+</div>

resources/views/components/menu/itemLink.blade.php

@@ -0,0 +1,8 @@
+<div>
+    <a
+        {{ $attributes }}
+        class="flex items-center w-full gap-2 px-3 py-1 text-sm text-left transition-colors rounded hover:bg-light-base-400 dark:hover:bg-base-700 text-light-base-950 dark:text-base-50"
+    >
+        {{ $slot }}
+    </a>
+</div>

resources/views/components/menu/items.blade.php

@@ -0,0 +1,9 @@
+<div
+    x-show="menuOpen"
+    x-anchor.bottom-end="$refs.button"
+    @click.away="menuOpen = false"
+    class="min-w-[10rem] z-20 border bg-light-base-200 dark:bg-base-950 border-light-base-300 dark:border-base-500 divide-y rounded-md shadow-lg p-1.5 outline-nonea"
+    x-cloak
+>
+    {{ $slot }}
+</div>