From bd68a179d88e1fcbf4856725a917eb61a429067a Mon Sep 17 00:00:00 2001
From: Ovidiu U <nonreal@gmail.com>
Date: Sat, 11 Apr 2026 13:07:00 +0100
Subject: [PATCH] feat: add user avatar dropdown with settings and logout to
 dashboard nav

---
 .../js/views/dashboard/DashboardLayout.vue    | 73 ++++++++++++++++++-
 1 file changed, 69 insertions(+), 4 deletions(-)

diff --git a/resources/js/views/dashboard/DashboardLayout.vue b/resources/js/views/dashboard/DashboardLayout.vue
index 1755c24..2ca57a1 100644
--- a/resources/js/views/dashboard/DashboardLayout.vue
+++ b/resources/js/views/dashboard/DashboardLayout.vue
@@ -13,7 +13,45 @@
                     <RouterLink to="/" class="text-sm font-bold text-[#89726c] hover:text-[#4a3f3b]">
                         ← Find fuel
                     </RouterLink>
-                    <span class="text-sm text-[#89726c]">{{ user?.email }}</span>
+
+                    <!-- User dropdown -->
+                    <div x-data="{ open: false }" class="relative">
+                        <button
+                            @click="open = !open"
+                            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"
+                        >
+                            {{ 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"
+                        >
+                            <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="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>
+                    </div>
                 </div>
             </div>
         </nav>
@@ -27,7 +65,7 @@
                         :key="item.to"
                         :to="item.to"
                         class="flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-bold transition-colors"
-                        :class="$route.path === item.to
+                        :class="isActive(item.to)
                             ? 'bg-[#bb5b3e] text-white'
                             : 'text-[#89726c] hover:bg-white hover:text-[#4a3f3b]'"
                     >
@@ -46,15 +84,42 @@
 </template>
 
 <script setup>
-import { RouterLink, RouterView, useRoute } from 'vue-router'
+import { computed } from 'vue'
+import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
 import { useAuth } from '../../composables/useAuth.js'
 
-const { user } = useAuth()
+const { user, logout } = useAuth()
 const $route = useRoute()
+const router = useRouter()
+
+const userInitials = computed(() => {
+    if (!user.value?.name) {
+        return '?'
+    }
+    return user.value.name
+        .split(' ')
+        .slice(0, 2)
+        .map((w) => w[0])
+        .join('')
+        .toUpperCase()
+})
+
+async function handleLogout() {
+    await logout()
+    router.push('/')
+}
+
+function isActive(to) {
+    if (to === '/dashboard') {
+        return $route.path === '/dashboard'
+    }
+    return $route.path.startsWith(to)
+}
 
 const navItems = [
     { to: '/dashboard', label: 'Overview', icon: 'lucide:layout-dashboard' },
     { to: '/dashboard/saved-stations', label: 'Saved Stations', icon: 'lucide:bookmark' },
     { to: '/dashboard/preferences', label: 'Preferences', icon: 'lucide:settings' },
+    { to: '/dashboard/settings', label: 'Account', icon: 'lucide:user' },
 ]
 </script>