Dropdown Menu

Blade:

<div x-data="{

open: false,

toggle() {

if (this.open) {

return this.close()

}

this.$refs.button.focus()

this.open = true

},

close(focusAfter) {

if (!this.open) return

this.open = false

focusAfter && focusAfter.focus()

}

}" x-on:keydown.escape.prevent.stop="close($refs.button)"

x-on:focusin.window="! $refs.panel.contains($event.target) && close()"

x-id="['dropdown-button']" class="relative">

<!-- Button -->

<button x-ref="button" x-on:click="toggle()" :aria-expanded="open"

:aria-controls="$id('dropdown-button')" type="button"

class="flex items-center gap-2 px-5 py-2.5">

<x-icon.ellipsis-horizontal />

</button>

<!-- Panel -->

<div x-ref="panel" x-show="open" x-transition.origin.top.left

x-on:click.outside="close($refs.button)" :id="$id('dropdown-button')"

style="display: none;"

class="absolute -left-20 w-40 rounded-md bg-white shadow-md z-10 border">

<a href="{{ route('products.show', $product->id) }}"

class="flex items-center gap-2 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-2 text-left text-sm hover:bg-gray-50 disabled:text-gray-500">

Details anzeigen

</a>

<a href="{{ route('products.edit', $product->id) }}"

class="flex items-center gap-2 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-2 text-left text-sm hover:bg-gray-50 disabled:text-gray-500">

Produkt bearbeiten

</a>

<a href="#" wire:click="deleteProduct({{ $product->id }})"

wire:confirm="Bist Du sicher, dass Du das Produkt {{ $product->title }} löschen willst?"

class="flex items-center gap-2 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-2 text-left text-sm hover:bg-gray-50 disabled:text-gray-500">

<span class="text-red-600">Produkt löschen</span>

</a>

</div>

</div>