Skip to main content

Black Friday 2025! Only until December 1st: coupon FRIDAY25 for 40% off Yearly/Lifetime membership!

Read more here

benjamincrozat/blog-v5

126 stars
2 code files
View benjamincrozat/blog-v5 on GitHub

resources/views/components/nav.blade.php

Open in GitHub
// ...
 
<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>

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

Open in GitHub
<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>

We'd Love Your Feedback

Tell us what you like or what we can improve

Feel free to share anything you like or dislike about this page or the platform in general.