From 3895356b0d1ab04bf3b5453fb5c3c0c7be5c859c Mon Sep 17 00:00:00 2001
From: Ovidiu U <nonreal@gmail.com>
Date: Sat, 11 Apr 2026 13:21:27 +0100
Subject: [PATCH] fix: replace Alpine dropdown with Vue reactive state in
 DashboardLayout

Alpine.js is not loaded in the Vue SPA bundle, causing the avatar dropdown
to never open and making Settings and Log out inaccessible. Replaced x-data/
x-show/x-transition/@click.away with Vue refs, onMounted/onUnmounted click-
outside listener, and Vue's built-in <Transition> component.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../js/views/dashboard/DashboardLayout.vue    | 86 ++++++++++++-------
 1 file changed, 56 insertions(+), 30 deletions(-)

diff --git a/resources/js/views/dashboard/DashboardLayout.vue b/resources/js/views/dashboard/DashboardLayout.vue
index 2ca57a1..4947858 100644
--- a/resources/js/views/dashboard/DashboardLayout.vue
+++ b/resources/js/views/dashboard/DashboardLayout.vue
@@ -15,42 +15,50 @@
                     </RouterLink>
 
                     <!-- User dropdown -->
-                    <div x-data="{ open: false }" class="relative">
+                    <div ref="dropdownRef" class="relative">
                         <button
-                            @click="open = !open"
+                            @click="dropdownOpen = !dropdownOpen"
                             class="w-9 h-9 rounded-full bg-[#bb5b3e] flex items-center justify-center text-white text-sm font-black hover:bg-[#a34a31] transition-colors"
+                            :aria-expanded="dropdownOpen"
+                            aria-haspopup="true"
                         >
                             {{ userInitials }}
                         </button>
-                        <div
-                            x-show="open"
-                            @click.away="open = false"
-                            x-transition
-                            class="absolute right-0 top-full mt-2 w-64 bg-white border border-[#e5ded7] rounded-2xl shadow-lg overflow-hidden z-50"
-                            style="display: none"
+                        <Transition
+                            enter-active-class="transition ease-out duration-100"
+                            enter-from-class="transform opacity-0 scale-95"
+                            enter-to-class="transform opacity-100 scale-100"
+                            leave-active-class="transition ease-in duration-75"
+                            leave-from-class="transform opacity-100 scale-100"
+                            leave-to-class="transform opacity-0 scale-95"
                         >
-                            <div class="px-4 py-3 border-b border-[#e5ded7]">
-                                <p class="text-sm font-black text-[#4a3f3b]">{{ user?.name }}</p>
-                                <p class="text-xs text-[#89726c] truncate">{{ user?.email }}</p>
+                            <div
+                                v-show="dropdownOpen"
+                                class="absolute right-0 top-full mt-2 w-64 bg-white border border-[#e5ded7] rounded-2xl shadow-lg overflow-hidden z-50"
+                            >
+                                <div class="px-4 py-3 border-b border-[#e5ded7]">
+                                    <p class="text-sm font-black text-[#4a3f3b]">{{ user?.name }}</p>
+                                    <p class="text-xs text-[#89726c] truncate">{{ user?.email }}</p>
+                                </div>
+                                <div class="py-1">
+                                    <RouterLink
+                                        to="/dashboard/settings"
+                                        @click="dropdownOpen = false"
+                                        class="flex items-center gap-3 px-4 py-2.5 text-sm font-bold text-[#89726c] hover:bg-[#faf6f3] hover:text-[#4a3f3b] transition-colors"
+                                    >
+                                        <iconify-icon icon="lucide:settings"></iconify-icon>
+                                        Settings
+                                    </RouterLink>
+                                    <button
+                                        @click="handleLogout"
+                                        class="w-full flex items-center gap-3 px-4 py-2.5 text-sm font-bold text-[#89726c] hover:bg-[#faf6f3] hover:text-[#4a3f3b] transition-colors"
+                                    >
+                                        <iconify-icon icon="lucide:log-out"></iconify-icon>
+                                        Log out
+                                    </button>
+                                </div>
                             </div>
-                            <div class="py-1">
-                                <RouterLink
-                                    to="/dashboard/settings"
-                                    @click="open = false"
-                                    class="flex items-center gap-3 px-4 py-2.5 text-sm font-bold text-[#89726c] hover:bg-[#faf6f3] hover:text-[#4a3f3b] transition-colors"
-                                >
-                                    <iconify-icon icon="lucide:settings"></iconify-icon>
-                                    Settings
-                                </RouterLink>
-                                <button
-                                    @click="handleLogout"
-                                    class="w-full flex items-center gap-3 px-4 py-2.5 text-sm font-bold text-[#89726c] hover:bg-[#faf6f3] hover:text-[#4a3f3b] transition-colors"
-                                >
-                                    <iconify-icon icon="lucide:log-out"></iconify-icon>
-                                    Log out
-                                </button>
-                            </div>
-                        </div>
+                        </Transition>
                     </div>
                 </div>
             </div>
@@ -84,7 +92,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
 import { useAuth } from '../../composables/useAuth.js'
 
@@ -92,6 +100,23 @@ const { user, logout } = useAuth()
 const $route = useRoute()
 const router = useRouter()
 
+const dropdownOpen = ref(false)
+const dropdownRef = ref(null)
+
+function handleClickOutside(event) {
+    if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
+        dropdownOpen.value = false
+    }
+}
+
+onMounted(() => {
+    document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+    document.removeEventListener('click', handleClickOutside)
+})
+
 const userInitials = computed(() => {
     if (!user.value?.name) {
         return '?'
@@ -105,6 +130,7 @@ const userInitials = computed(() => {
 })
 
 async function handleLogout() {
+    dropdownOpen.value = false
     await logout()
     router.push('/')
 }