Fix dropdown: move @click.outside to parent, add x-cloak, clean up x-transition
This commit is contained in:
@@ -114,7 +114,7 @@
|
||||
|
||||
<!-- User account -->
|
||||
@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">
|
||||
<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" />
|
||||
@@ -131,7 +131,7 @@
|
||||
</svg>
|
||||
</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="flex items-center gap-3">
|
||||
<img src="{{ auth()->user()->avatar }}" class="rounded-full border-2 border-neutral" alt="avatar" />
|
||||
|
||||
Reference in New Issue
Block a user