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 -->
|
<!-- 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" />
|
||||||
|
|||||||
Reference in New Issue
Block a user