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

Fix dropdown: use absolute positioning instead of fixed (backdrop-filter containing block issue)

Browse Source
This commit is contained in:
Joseph.Rawlings
2026-03-11 17:42:34 -04:00
parent 4748238150
commit 7491b85d26
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -114,8 +114,8 @@
<!-- User account -->
@if(auth()->check())
<div class="relative hidden lg:block" x-data="{ open: false, dropTop: 0 }">
<button @click="open = !open; if(!open) return; $nextTick(() => { dropTop = $el.getBoundingClientRect().bottom + 8 })" class="flex items-center gap-3 p-2 rounded-lg transition-all duration-200 group">
<div class="relative hidden lg:block" x-data="{ 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">
@@ -131,7 +131,7 @@
</svg>
</button>
<div x-show="open" x-transition ... @click.away="open = false" class="fixed right-4 lg:right-8 w-72 bg-background-secondary border border-neutral rounded-2xl shadow-2xl z-50" :style="'top: ' + dropTop + 'px'">
<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 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" />