Fix dropdown: move @click.outside to parent, add x-cloak, clean up x-transition

This commit is contained in:
2026-03-11 17:51:33 -04:00
parent 7491b85d26
commit b42f0f47e4

View File

@@ -114,7 +114,7 @@
<!-- User account --> <!-- User account -->
@if(auth()->check()) @if(auth()->check())
<div class="relative hidden lg:block" x-data="{ open: false }"> <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"> <button @click="open = !open" class="flex items-center gap-3 p-2 rounded-lg transition-all duration-200 group">
<div class="relative"> <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" /> <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" />
@@ -131,7 +131,7 @@
</svg> </svg>
</button> </button>
<div x-show="open" x-transition ... @click.away="open = false" class="absolute right-0 top-full mt-2 w-72 bg-background-secondary border border-neutral rounded-2xl shadow-2xl z-50"> <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="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="rounded-full border-2 border-neutral" alt="avatar" />