benjamincrozat/blog-v5

// ...

    <x-dropdown>
        <x-slot:btn>
            <x-heroicon-o-ellipsis-horizontal
                class="mx-auto transition-transform size-6 md:size-7"
                x-bind:class="{ 'rotate-90': open }"
            />
            More
        </x-slot>

        <x-slot:items>
            // ...
        </x-slot>
    </x-dropdown>
</nav>

<div
    {{ $attributes->merge([
        'x-data' => '{ open: false }',
    ]) }}
>
    <button {{ $btn->attributes->merge(['@click' => 'open = !open']) }}>
        {{ $btn }}
    </button>

    <div
        {{
            $items
                ->attributes
                ->class('z-10 py-2 text-base bg-white/75 backdrop-blur-md rounded-lg shadow-lg ring-1 ring-black/10 min-w-[240px]')
                ->merge([
                    'x-anchor.bottom' => '$el.previousElementSibling',
                    'x-cloak' => true,
                    'x-show' => 'open',
                    '@click.away' => 'open = false',
                ])
        }}
        x-transition
    >
        {{ $items }}
    </div>
</div>