From 757f85808f1a04adf67973b15ddecfe900ee1afe Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 11 Mar 2026 18:26:38 -0400
Subject: [PATCH] Reimplement user dropdown using proven x-dropdown component,
 fix x-transition syntax

---
 .../components/navigation/index.blade.php     | 48 ++++++-------------
 1 file changed, 14 insertions(+), 34 deletions(-)

diff --git a/themes/lucentui/views/components/navigation/index.blade.php b/themes/lucentui/views/components/navigation/index.blade.php
index 7dc0687e5..26a819ec3 100644
--- a/themes/lucentui/views/components/navigation/index.blade.php
+++ b/themes/lucentui/views/components/navigation/index.blade.php
@@ -112,47 +112,27 @@
 
                 <livewire:components.cart />
 
-                <!-- User account -->
+                <!-- User account dropdown (desktop) -->
                 @if(auth()->check())
-                    <div class="relative hidden lg:block" x-data="{ open: false }" @click.outside="open = false">
-                        <button @click="open = !open" class="flex items-center gap-3 p-2 rounded-lg transition-all duration-200 group">
-                            <div class="relative">
-                                <img src="{{ auth()->user()->avatar }}" class="w-10 h-10 rounded-full border-2 border-background-secondary group-hover:border-blue-500 transition-all duration-300 shadow-lg" alt="avatar" />
-                                <div class="absolute -bottom-0.5 -right-0.5 w-4 h-4 bg-green-500 rounded-full border-2 border-background shadow-lg" x-show="isOnline" x-transition:enter="transition-all duration-300" x-transition:enter-start="scale-0 opacity-0" x-transition:enter-end="scale-100 opacity-100">
-                                    <div class="w-full h-full bg-green-400 rounded-full animate-ping"></div>
-                                </div>
-                            </div>
-                            <div class="hidden lg:block text-left">
-                                <div class="text-sm font-bold">{{ Auth::user()->first_name }}</div>
-                                <div class="text-xs">{{ auth()->user()->email }}</div>
-                            </div>
-                            <svg class="w-4 h-4 transform transition-transform duration-200" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-                            </svg>
-                        </button>
-
-                        <div x-show="open" x-transition x-cloak class="absolute right-0 top-full mt-2 w-72 bg-background-secondary border border-neutral rounded-2xl shadow-2xl z-50">
-                            <div class="p-4 border-b border-neutral">
+                    <div class="hidden lg:block">
+                        <x-dropdown>
+                            <x-slot:trigger>
                                 <div class="flex items-center gap-3">
-                                    <img src="{{ auth()->user()->avatar }}" class="rounded-full border-2 border-neutral" alt="avatar" />
-                                    <div>
-                                        <div class="font-medium text-base">{{ auth()->user()->name }}</div>
-                                        <div class="text-sm text-base">{{ auth()->user()->email }}</div>
-                                        <div class="text-xs text-green-400 font-medium">● Online</div>
-                                    </div>
+                                    <img src="{{ auth()->user()->avatar }}" class="w-8 h-8 rounded-full border-2 border-background-secondary" alt="avatar" />
+                                    <span class="text-sm font-bold">{{ Auth::user()->first_name }}</span>
                                 </div>
-                            </div>
-                            <div class="py-2">
+                            </x-slot:trigger>
+                            <x-slot:content>
                                 @foreach (\App\Classes\Navigation::getAccountDropdownLinks() as $nav)
-                                    <x-navigation.link :href="route($nav['route'], $nav['params'] ?? null)" :spa="isset($nav['spa']) ? $nav['spa'] : true" class="flex items-center gap-3 px-4 py-3 text-sm text-base hover:bg-background transition-all duration-200">
+                                    <x-navigation.link :href="route($nav['route'], $nav['params'] ?? null)" :spa="isset($nav['spa']) ? $nav['spa'] : true">
                                         {{ $nav['name'] }}
                                     </x-navigation.link>
                                 @endforeach
-                                <div class="px-1">
+                                <div class="border-t border-neutral/50 mt-1 pt-1">
                                     <livewire:auth.logout />
                                 </div>
-                            </div>
-                        </div>
+                            </x-slot:content>
+                        </x-dropdown>
                     </div>
                 @else
                     <div class="hidden lg:flex items-center gap-3">
@@ -173,10 +153,10 @@
 
                 <!-- Mobile menu toggle -->
                 <button @click="slideOverOpen = !slideOverOpen" class="relative w-12 h-12 flex lg:hidden items-center justify-center rounded-xl bg-background hover:bg-neutral/50 transition-all duration-300 group" aria-label="Toggle Menu">
-                    <span x-show="!slideOverOpen" x-transition ... class="absolute inset-0 flex items-center justify-center">
+                    <span x-show="!slideOverOpen" x-transition.opacity class="absolute inset-0 flex items-center justify-center">
                         <x-ri-menu-fill class="size-6 text-base/80 group-hover:text-foreground transition-colors duration-200" />
                     </span>
-                    <span x-show="slideOverOpen" x-transition ... class="absolute inset-0 flex items-center justify-center">
+                    <span x-show="slideOverOpen" x-transition.opacity class="absolute inset-0 flex items-center justify-center">
                         <x-ri-close-fill class="size-6 text-base/80 group-hover:text-foreground transition-colors duration-200" />
                     </span>
                 </button>