From 8547f0d7213050a5cb8fdb7057b54b7d138b39e4 Mon Sep 17 00:00:00 2001
From: Lewis Larsen <lewis@larsens.dev>
Date: Wed, 28 Aug 2024 12:41:17 +0100
Subject: [PATCH] style: Extracted button dropdown

---
 .../views/components/danger-button.blade.php  | 122 ++++++------------
 .../primary-button-dropdown.blade.php         |  84 ++++++++++++
 .../views/components/primary-button.blade.php |  83 +++---------
 .../secondary-button-dropdown.blade.php       |  81 ++++++++++++
 .../components/secondary-button.blade.php     | 110 +++++-----------
 5 files changed, 255 insertions(+), 225 deletions(-)
 create mode 100644 resources/views/components/primary-button-dropdown.blade.php
 create mode 100644 resources/views/components/secondary-button-dropdown.blade.php

diff --git a/resources/views/components/danger-button.blade.php b/resources/views/components/danger-button.blade.php
index a73584f..25cf3b8 100644
--- a/resources/views/components/danger-button.blade.php
+++ b/resources/views/components/danger-button.blade.php
@@ -3,90 +3,46 @@
     'iconOnly' => false,
     'loadingText' => 'Loading...',
     'action' => '',
-    'dropdown' => false,
 ])
 
-<div class="relative inline-block text-left" x-data="{ open: false }">
-    <button
-        {{
-            $attributes->merge([
-                'type' => 'button',
-                'class' =>
-                    'inline-flex items-center relative overflow-hidden ' .
-                    ($iconOnly ? 'p-2.5' : 'px-5 py-2.5') .
-                    ' bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 ' .
-                    'border border-gray-300 dark:border-gray-600 ' .
-                    'rounded-[0.7rem] ' .
-                    'font-medium text-sm text-red-600 dark:text-red-400 ' .
-                    'focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400 ' .
-                    'focus:ring-offset-2 dark:focus:ring-offset-gray-900 ' .
-                    'disabled:opacity-50 disabled:cursor-not-allowed ' .
-                    'transition-all duration-300 ease-in-out ' .
-                    'shadow-sm hover:shadow-md ' .
-                    'group ' .
-                    ($centered ? 'justify-center w-full' : ''),
-                'wire:loading.attr' => 'disabled',
-                'wire:loading.class' => 'opacity-50 cursor-not-allowed',
-                'wire:target' => $action,
-                '@click' => $dropdown ? 'open = !open' : '',
-            ])
-        }}
-    >
-        <span
-            class="relative z-10 flex items-center transition-colors duration-300 ease-in-out group-hover:text-white group-active:text-white"
-        >
-            @if ($action)
-                <div wire:loading wire:target="{{ $action }}" class="flex items-center">
-                    <x-spinner class="mr-2 h-4 w-4 text-red-500 group-hover:text-white dark:text-red-400" />
-                    <span>{{ __($loadingText) }}</span>
-                </div>
-                <div wire:loading.remove wire:target="{{ $action }}">
-                    {{ $slot }}
-                </div>
-            @else
+<button
+    {{
+        $attributes->merge([
+            'type' => 'button',
+            'class' =>
+                'inline-flex items-center relative overflow-hidden ' .
+                ($iconOnly ? 'p-2.5' : 'px-5 py-2.5') .
+                ' bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 ' .
+                'border border-gray-300 dark:border-gray-600 ' .
+                'rounded-[0.7rem] ' .
+                'font-medium text-sm text-red-600 dark:text-red-400 ' .
+                'focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400 ' .
+                'focus:ring-offset-2 dark:focus:ring-offset-gray-900 ' .
+                'disabled:opacity-50 disabled:cursor-not-allowed ' .
+                'transition-all duration-300 ease-in-out ' .
+                'shadow-sm hover:shadow-md ' .
+                'group ' .
+                ($centered ? 'justify-center w-full' : ''),
+            'wire:loading.attr' => 'disabled',
+            'wire:loading.class' => 'opacity-50 cursor-not-allowed',
+            'wire:target' => $action,
+        ])
+    }}
+>
+    <span class="relative z-10 transition-colors duration-300 ease-in-out group-hover:text-white">
+        @if ($action)
+            <div wire:loading wire:target="{{ $action }}" class="flex items-center">
+                <x-spinner class="mr-2 h-4 w-4 text-red-500 group-hover:text-white dark:text-red-400" />
+                <span>{{ __($loadingText) }}</span>
+            </div>
+            <div wire:loading.remove wire:target="{{ $action }}">
                 {{ $slot }}
-            @endif
-
-            @if ($dropdown)
-                <svg
-                    class="ml-2 h-5 w-5 text-red-600 group-hover:text-white group-active:text-white dark:text-red-400"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    aria-hidden="true"
-                >
-                    <path
-                        fill-rule="evenodd"
-                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                        clip-rule="evenodd"
-                    />
-                </svg>
-            @endif
-        </span>
-        <span
-            class="absolute inset-0 origin-left scale-x-0 transform bg-gradient-to-r from-red-600 to-red-500 transition-transform duration-300 ease-out group-hover:scale-x-100 group-active:scale-x-100 dark:from-red-700 dark:to-red-600"
-        ></span>
-    </button>
-
-    @if ($dropdown)
-        <div
-            x-show="open"
-            @click.away="open = false"
-            x-transition:enter="transition duration-100 ease-out"
-            x-transition:enter-start="scale-95 transform opacity-0"
-            x-transition:enter-end="scale-100 transform opacity-100"
-            x-transition:leave="transition duration-75 ease-in"
-            x-transition:leave-start="scale-100 transform opacity-100"
-            x-transition:leave-end="scale-95 transform opacity-0"
-            class="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-[0.70rem] bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800"
-            role="menu"
-            aria-orientation="vertical"
-            aria-labelledby="menu-button"
-            tabindex="-1"
-        >
-            <div class="py-1" role="none">
-                {{ $dropdownContent }}
             </div>
-        </div>
-    @endif
-</div>
+        @else
+            {{ $slot }}
+        @endif
+    </span>
+    <span
+        class="absolute inset-0 origin-left scale-x-0 transform bg-gradient-to-r from-red-600 to-red-500 transition-transform duration-300 ease-out group-hover:scale-x-100 dark:from-red-700 dark:to-red-600"
+    ></span>
+</button>
diff --git a/resources/views/components/primary-button-dropdown.blade.php b/resources/views/components/primary-button-dropdown.blade.php
new file mode 100644
index 0000000..e050ebc
--- /dev/null
+++ b/resources/views/components/primary-button-dropdown.blade.php
@@ -0,0 +1,84 @@
+@props([
+    'centered' => false,
+    'iconOnly' => false,
+    'fat' => false,
+    'loading' => false,
+    'loadingText' => 'Saving...',
+    'action' => '',
+    'noLivewire' => false,
+])
+
+<div @class([
+    'relative inline-flex',
+    'w-full' => $centered,
+]) x-data="{ open: false }">
+    <button
+        {{
+            $attributes->merge([
+                'type' => 'button',
+                'class' =>
+                    'inline-flex items-center flex-grow ' .
+                    ($iconOnly ? 'px-3.5 py-2' : ($fat ? 'px-8 py-4 text-lg' : 'px-7 py-2.5')) .
+                    ' bg-primary-900 dark:bg-white dark:hover:bg-gray-200 dark:text-gray-900 border border-transparent ' .
+                    'rounded-l-[0.70rem] font-semibold text-sm text-white hover:bg-primary-950 focus:bg-primary-950 ' .
+                    'dark:focus:bg-white active:bg-primary-950 dark:active:bg-white focus:outline-none focus:ring-2 ' .
+                    'focus:ring-primary-950 focus:ring-offset-2 transition ease-in-out duration-150' .
+                    ($centered ? ' justify-center' : ''),
+            ])
+        }}
+    >
+        @if (! $noLivewire)
+            <div wire:loading wire:target="{{ $action }}">
+                <x-spinner class="mr-2 inline h-4 w-4 text-white dark:text-gray-900" />
+                {{ __($loadingText) }}
+            </div>
+            <div wire:loading.remove wire:target="{{ $action }}">
+                {{ $slot }}
+            </div>
+        @else
+            {{ $slot }}
+        @endif
+    </button>
+
+    <button
+        type="button"
+        @click="open = !open"
+        aria-haspopup="true"
+        :aria-expanded="open"
+        class="inline-flex items-center rounded-r-[0.70rem] border-l border-primary-800 bg-primary-900 px-3 py-2 text-sm text-white transition duration-150 ease-in-out hover:bg-primary-950 focus:bg-primary-950 focus:outline-none focus:ring-2 focus:ring-primary-950 focus:ring-offset-2 active:bg-primary-950 dark:border-gray-300 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200 dark:focus:bg-white dark:active:bg-white"
+    >
+        <svg
+            class="h-5 w-5"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+        >
+            <path
+                fill-rule="evenodd"
+                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                clip-rule="evenodd"
+            />
+        </svg>
+    </button>
+
+    <div
+        x-show="open"
+        @click.away="open = false"
+        x-transition:enter="transition duration-100 ease-out"
+        x-transition:enter-start="scale-95 transform opacity-0"
+        x-transition:enter-end="scale-100 transform opacity-100"
+        x-transition:leave="transition duration-75 ease-in"
+        x-transition:leave-start="scale-100 transform opacity-100"
+        x-transition:leave-end="scale-95 transform opacity-0"
+        class="absolute right-0 z-10 mt-2 w-56 divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:divide-gray-700 dark:bg-gray-800"
+        style="top: 100%"
+        role="menu"
+        aria-orientation="vertical"
+        tabindex="-1"
+    >
+        <div class="py-1" role="none">
+            {{ $dropdownContent }}
+        </div>
+    </div>
+</div>
diff --git a/resources/views/components/primary-button.blade.php b/resources/views/components/primary-button.blade.php
index f321f9f..439c510 100644
--- a/resources/views/components/primary-button.blade.php
+++ b/resources/views/components/primary-button.blade.php
@@ -6,74 +6,25 @@
     'loadingText' => 'Saving...',
     'action' => '',
     'noLivewire' => false,
-    'dropdown' => false,
 ])
 
-<div class="relative inline-block text-left" x-data="{ open: false }">
-    <button
-        {{
-            $attributes->merge([
-                'type' => 'submit',
-                'class' =>
-                    'inline-flex items-center ' .
-                    ($iconOnly ? 'px-3.5 py-2' : ($fat ? 'px-8 py-4 text-lg' : 'px-7 py-2.5')) .
-                    ' bg-primary-900 dark:bg-white dark:hover:bg-gray-200 dark:text-gray-900 border border-transparent ' .
-                    'rounded-[0.70rem] font-semibold text-sm text-white hover:bg-primary-950 focus:bg-primary-950 ' .
-                    'dark:focus:bg-white active:bg-primary-950 dark:active:bg-white focus:outline-none focus:ring-2 ' .
-                    'focus:ring-primary-950 focus:ring-offset-2 transition ease-in-out duration-150' .
-                    ($centered ? ' justify-center w-full' : ''),
-                '@click' => $dropdown ? 'open = !open' : '',
-            ])
-        }}
-    >
-        @if (! $noLivewire)
-            <div wire:loading wire:target="{{ $action }}">
-                <x-spinner class="mr-2 inline h-4 w-4 text-white dark:text-gray-900" />
-                {{ __($loadingText) }}
-            </div>
-            <div wire:loading.remove wire:target="{{ $action }}">
-                {{ $slot }}
-            </div>
-        @else
+<button
+    {{
+        $attributes->merge([
+            'type' => 'submit',
+            'class' => 'inline-flex items-center ' . ($iconOnly ? 'px-3.5 py-2' : ($fat ? 'px-8 py-4 text-lg' : 'px-7 py-2.5')) . ' bg-primary-900 dark:bg-white dark:hover:bg-gray-200 dark:text-gray-900 border border-transparent rounded-[0.70rem] font-semibold text-sm text-white hover:bg-primary-950 focus:bg-primary-950 dark:focus:bg-white active:bg-primary-950 dark:active:bg-white focus:outline-none focus:ring-2 focus:ring-primary-950 focus:ring-offset-2 transition ease-in-out duration-150' . ($centered ? ' justify-center w-full' : ''),
+        ])
+    }}
+>
+    @if (! $noLivewire)
+        <div wire:loading wire:target="{{ $action }}">
+            <x-spinner class="mr-2 inline h-4 w-4 text-white dark:text-gray-900" />
+            {{ __($loadingText) }}
+        </div>
+        <div wire:loading.remove wire:target="{{ $action }}">
             {{ $slot }}
-        @endif
-
-        @if ($dropdown)
-            <svg
-                class="-mr-1 ml-2 h-5 w-5"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                aria-hidden="true"
-            >
-                <path
-                    fill-rule="evenodd"
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                    clip-rule="evenodd"
-                />
-            </svg>
-        @endif
-    </button>
-
-    @if ($dropdown)
-        <div
-            x-show="open"
-            @click.away="open = false"
-            x-transition:enter="transition duration-100 ease-out"
-            x-transition:enter-start="scale-95 transform opacity-0"
-            x-transition:enter-end="scale-100 transform opacity-100"
-            x-transition:leave="transition duration-75 ease-in"
-            x-transition:leave-start="scale-100 transform opacity-100"
-            x-transition:leave-end="scale-95 transform opacity-0"
-            class="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-[0.70rem] bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800"
-            role="menu"
-            aria-orientation="vertical"
-            aria-labelledby="menu-button"
-            tabindex="-1"
-        >
-            <div class="py-1" role="none">
-                {{ $dropdownContent }}
-            </div>
         </div>
+    @else
+        {{ $slot }}
     @endif
-</div>
+</button>
diff --git a/resources/views/components/secondary-button-dropdown.blade.php b/resources/views/components/secondary-button-dropdown.blade.php
new file mode 100644
index 0000000..4348483
--- /dev/null
+++ b/resources/views/components/secondary-button-dropdown.blade.php
@@ -0,0 +1,81 @@
+@props([
+    'centered' => false,
+    'iconOnly' => false,
+    'loadingText' => 'Loading...',
+    'action' => '',
+])
+
+<div class="relative inline-block text-left" x-data="{ open: false }">
+    <button
+        {{
+            $attributes->merge([
+                'type' => 'button',
+                'class' =>
+                    'inline-flex items-center ' .
+                    ($iconOnly ? 'p-2.5' : 'px-5 py-2.5') .
+                    ' bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 ' .
+                    'border border-gray-300 dark:border-gray-600 ' .
+                    'rounded-[0.7rem] ' .
+                    'font-medium text-sm text-gray-700 dark:text-gray-200 ' .
+                    'hover:from-gray-100 hover:to-gray-200 dark:hover:from-gray-700 dark:hover:to-gray-600 ' .
+                    'focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 ' .
+                    'focus:ring-offset-2 dark:focus:ring-offset-gray-900 ' .
+                    'active:from-gray-200 active:to-gray-300 dark:active:from-gray-600 dark:active:to-gray-500 ' .
+                    'disabled:opacity-50 disabled:cursor-not-allowed ' .
+                    'transition-all duration-200 ease-in-out ' .
+                    'shadow-sm hover:shadow-md ' .
+                    ($centered ? 'justify-center w-full' : ''),
+                'wire:loading.attr' => 'disabled',
+                'wire:loading.class' => 'opacity-50 cursor-not-allowed',
+                'wire:target' => $action,
+                '@click' => 'open = !open',
+            ])
+        }}
+    >
+        @if ($action)
+            <div wire:loading wire:target="{{ $action }}" class="flex items-center">
+                <x-spinner class="mr-2 h-4 w-4 text-primary-500 dark:text-primary-400" />
+                <span>{{ __($loadingText) }}</span>
+            </div>
+            <div wire:loading.remove wire:target="{{ $action }}">
+                {{ $slot }}
+            </div>
+        @else
+            {{ $slot }}
+        @endif
+
+        <svg
+            class="-mr-1 ml-2 h-5 w-5"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+        >
+            <path
+                fill-rule="evenodd"
+                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                clip-rule="evenodd"
+            />
+        </svg>
+    </button>
+
+    <div
+        x-show="open"
+        @click.away="open = false"
+        x-transition:enter="transition duration-100 ease-out"
+        x-transition:enter-start="scale-95 transform opacity-0"
+        x-transition:enter-end="scale-100 transform opacity-100"
+        x-transition:leave="transition duration-75 ease-in"
+        x-transition:leave-start="scale-100 transform opacity-100"
+        x-transition:leave-end="scale-95 transform opacity-0"
+        class="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-[0.70rem] bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800"
+        role="menu"
+        aria-orientation="vertical"
+        aria-labelledby="menu-button"
+        tabindex="-1"
+    >
+        <div class="py-1" role="none">
+            {{ $dropdownContent }}
+        </div>
+    </div>
+</div>
diff --git a/resources/views/components/secondary-button.blade.php b/resources/views/components/secondary-button.blade.php
index 2ab2494..2a9d1ca 100644
--- a/resources/views/components/secondary-button.blade.php
+++ b/resources/views/components/secondary-button.blade.php
@@ -3,84 +3,42 @@
     'iconOnly' => false,
     'loadingText' => 'Loading...',
     'action' => '',
-    'dropdown' => false,
 ])
 
-<div class="relative inline-block text-left" x-data="{ open: false }">
-    <button
-        {{
-            $attributes->merge([
-                'type' => 'button',
-                'class' =>
-                    'inline-flex items-center ' .
-                    ($iconOnly ? 'p-2.5' : 'px-5 py-2.5') .
-                    ' bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 ' .
-                    'border border-gray-300 dark:border-gray-600 ' .
-                    'rounded-[0.7rem] ' .
-                    'font-medium text-sm text-gray-700 dark:text-gray-200 ' .
-                    'hover:from-gray-100 hover:to-gray-200 dark:hover:from-gray-700 dark:hover:to-gray-600 ' .
-                    'focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 ' .
-                    'focus:ring-offset-2 dark:focus:ring-offset-gray-900 ' .
-                    'active:from-gray-200 active:to-gray-300 dark:active:from-gray-600 dark:active:to-gray-500 ' .
-                    'disabled:opacity-50 disabled:cursor-not-allowed ' .
-                    'transition-all duration-200 ease-in-out ' .
-                    'shadow-sm hover:shadow-md ' .
-                    ($centered ? 'justify-center w-full' : ''),
-                'wire:loading.attr' => 'disabled',
-                'wire:loading.class' => 'opacity-50 cursor-not-allowed',
-                'wire:target' => $action,
-                '@click' => $dropdown ? 'open = !open' : '',
-            ])
-        }}
-    >
-        @if ($action)
-            <div wire:loading wire:target="{{ $action }}" class="flex items-center">
-                <x-spinner class="mr-2 h-4 w-4 text-primary-500 dark:text-primary-400" />
-                <span>{{ __($loadingText) }}</span>
-            </div>
-            <div wire:loading.remove wire:target="{{ $action }}">
-                {{ $slot }}
-            </div>
-        @else
+<button
+    {{
+        $attributes->merge([
+            'type' => 'button',
+            'class' =>
+                'inline-flex items-center ' .
+                ($iconOnly ? 'p-2.5' : 'px-5 py-2.5') .
+                ' bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 ' .
+                'border border-gray-300 dark:border-gray-600 ' .
+                'rounded-[0.7rem] ' .
+                'font-medium text-sm text-gray-700 dark:text-gray-200 ' .
+                'hover:from-gray-100 hover:to-gray-200 dark:hover:from-gray-700 dark:hover:to-gray-600 ' .
+                'focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 ' .
+                'focus:ring-offset-2 dark:focus:ring-offset-gray-900 ' .
+                'active:from-gray-200 active:to-gray-300 dark:active:from-gray-600 dark:active:to-gray-500 ' .
+                'disabled:opacity-50 disabled:cursor-not-allowed ' .
+                'transition-all duration-200 ease-in-out ' .
+                'shadow-sm hover:shadow-md ' .
+                ($centered ? 'justify-center w-full' : ''),
+            'wire:loading.attr' => 'disabled',
+            'wire:loading.class' => 'opacity-50 cursor-not-allowed',
+            'wire:target' => $action,
+        ])
+    }}
+>
+    @if ($action)
+        <div wire:loading wire:target="{{ $action }}" class="flex items-center">
+            <x-spinner class="mr-2 h-4 w-4 text-primary-500 dark:text-primary-400" />
+            <span>{{ __($loadingText) }}</span>
+        </div>
+        <div wire:loading.remove wire:target="{{ $action }}">
             {{ $slot }}
-        @endif
-
-        @if ($dropdown)
-            <svg
-                class="-mr-1 ml-2 h-5 w-5"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                aria-hidden="true"
-            >
-                <path
-                    fill-rule="evenodd"
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                    clip-rule="evenodd"
-                />
-            </svg>
-        @endif
-    </button>
-
-    @if ($dropdown)
-        <div
-            x-show="open"
-            @click.away="open = false"
-            x-transition:enter="transition duration-100 ease-out"
-            x-transition:enter-start="scale-95 transform opacity-0"
-            x-transition:enter-end="scale-100 transform opacity-100"
-            x-transition:leave="transition duration-75 ease-in"
-            x-transition:leave-start="scale-100 transform opacity-100"
-            x-transition:leave-end="scale-95 transform opacity-0"
-            class="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-[0.70rem] bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800"
-            role="menu"
-            aria-orientation="vertical"
-            aria-labelledby="menu-button"
-            tabindex="-1"
-        >
-            <div class="py-1" role="none">
-                {{ $dropdownContent }}
-            </div>
         </div>
+    @else
+        {{ $slot }}
     @endif
-</div>
+</button>