26 lines
1.1 KiB
PHP
26 lines
1.1 KiB
PHP
@props([
|
|
'align' => 'left', // left, right
|
|
'width' => 'w-80 sm:w-96',
|
|
])
|
|
|
|
@php
|
|
$alignmentClasses = $align === 'right' ? 'right-0 origin-top-right' : 'left-0 origin-top-left';
|
|
@endphp
|
|
|
|
<details class="group relative inline-block text-left select-none">
|
|
<summary class="list-none cursor-pointer p-1.5 rounded-lg bg-slate-800/80 border border-slate-700/60 text-slate-300 hover:text-white hover:bg-slate-700/60 transition-colors flex items-center justify-center w-8 h-8 focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
|
{{ $trigger ?? '' }}
|
|
@if(!isset($trigger))
|
|
<i class="fa-solid fa-bars text-sm"></i>
|
|
@endif
|
|
</summary>
|
|
|
|
<!-- Backdrop for click-outside dismissal -->
|
|
<div class="fixed inset-0 z-40" onclick="this.closest('details').removeAttribute('open')"></div>
|
|
|
|
<!-- Dropdown Content Panel -->
|
|
<div class="absolute {{ $alignmentClasses }} mt-2 {{ $width }} bg-slate-900 border border-slate-700/80 rounded-xl shadow-2xl p-3.5 z-50 backdrop-blur-xl text-white divide-y divide-white/10 font-normal">
|
|
{{ $slot }}
|
|
</div>
|
|
</details>
|