resources/views/components/dropdown.blade.php

   1 @props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-white'])
   2
   3 @php
   4 switch ($align) {
   5     case 'left':
   6         $alignmentClasses = 'origin-top-left left-0';
   7         break;
   8     case 'top':
   9         $alignmentClasses = 'origin-top';
  10         break;
  11     case 'right':
  12     default:
  13         $alignmentClasses = 'origin-top-right right-0';
  14         break;
  15 }
  16
  17 switch ($width) {
  18     case '48':
  19         $width = 'w-48';
  20         break;
  21 }
  22 @endphp
  23
  24 <div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
  25     <div @click="open = ! open">
  26         {{ $trigger }}
  27     </div>
  28
  29     <div x-show="open"
  30             x-transition:enter="transition ease-out duration-200"
  31             x-transition:enter-start="transform opacity-0 scale-95"
  32             x-transition:enter-end="transform opacity-100 scale-100"
  33             x-transition:leave="transition ease-in duration-75"
  34             x-transition:leave-start="transform opacity-100 scale-100"
  35             x-transition:leave-end="transform opacity-0 scale-95"
  36             class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }}"
  37             style="display: none;"
  38             @click="open = false">
  39         <div class="rounded-md ring-1 ring-black ring-opacity-5 {{ $contentClasses }}">
  40             {{ $content }}
  41         </div>
  42     </div>
  43 </div>