Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Reimplement user dropdown using proven x-dropdown component, fix x-transition syntax

Browse Source
This commit is contained in:
Joseph.Rawlings
2026-03-11 18:26:38 -04:00
parent b42f0f47e4
commit 757f85808f
1 changed files with 14 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
themes/lucentui/views/components/navigation/index.blade.php
View File

@@ -112,47 +112,27 @@
<livewire:components.cart /> <livewire:components.cart />
<!-- User account --> <!-- User account dropdown (desktop) -->
@if(auth()->check()) @if(auth()->check())
<div class="relative hidden lg:block" x-data="{ open: false }" @click.outside="open = false"> <div class="hidden lg:block">
<button @click="open = !open" class="flex items-center gap-3 p-2 rounded-lg transition-all duration-200 group"> <x-dropdown>
<div class="relative"> <x-slot:trigger>
<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="flex items-center gap-3"> <div class="flex items-center gap-3">
<img src="{{ auth()->user()->avatar }}" class="rounded-full border-2 border-neutral" alt="avatar" /> <img src="{{ auth()->user()->avatar }}" class="w-8 h-8 rounded-full border-2 border-background-secondary" alt="avatar" />
<div> <span class="text-sm font-bold">{{ Auth::user()->first_name }}</span>
<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> </div>
</div> </x-slot:trigger>
</div> <x-slot:content>
<div class="py-2">
@foreach (\App\Classes\Navigation::getAccountDropdownLinks() as $nav) @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'] }} {{ $nav['name'] }}
</x-navigation.link> </x-navigation.link>
@endforeach @endforeach
<div class="px-1"> <div class="border-t border-neutral/50 mt-1 pt-1">
<livewire:auth.logout /> <livewire:auth.logout />
</div> </div>
</div> </x-slot:content>
</div> </x-dropdown>
</div> </div>
@else @else
<div class="hidden lg:flex items-center gap-3"> <div class="hidden lg:flex items-center gap-3">
@@ -173,10 +153,10 @@
<!-- Mobile menu toggle --> <!-- 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"> <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" /> <x-ri-menu-fill class="size-6 text-base/80 group-hover:text-foreground transition-colors duration-200" />
</span> </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" /> <x-ri-close-fill class="size-6 text-base/80 group-hover:text-foreground transition-colors duration-200" />
</span> </span>
</button> </button>