thrillwiki_laravel/resources/views/livewire/user-menu-component.blade.php

<div class="relative">
    <!-- Profile Picture Button -->
    @if(auth()->user()->profile?->avatar)
    <button
        wire:click.stop="toggle"
        type="button"
        role="button"
        aria-expanded="{{ $isOpen }}"
        aria-label="User menu"
    >
        <img
            src="{{ auth()->user()->profile->avatar }}"
            alt="{{ auth()->user()->name }}"
            class="w-10 h-10 transition-all duration-200 rounded-full cursor-pointer ring-2 ring-primary/20 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/40"
        />
    </button>
    @else
    <button
        wire:click.stop="toggle"
        type="button"
        role="button"
        aria-expanded="{{ $isOpen }}"
        aria-label="User menu"
        class="flex items-center justify-center w-10 h-10 text-lg font-semibold text-white transition-all duration-200 rounded-full cursor-pointer bg-gradient-to-br from-primary to-secondary hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/40"
    >
        {{ ucfirst(auth()->user()->name[0]) }}
    </button>
    @endif

    <!-- Dropdown Menu -->
    <div
        wire:key="user-menu"
        wire:click.away="close"
        role="menu"
        aria-orientation="vertical"
        aria-labelledby="user-menu-button"
        class="absolute right-0 z-50 w-56 mt-2 overflow-hidden transition-all duration-200 transform origin-top-right bg-gray-900/95 backdrop-blur-lg rounded-lg shadow-xl border border-gray-800/50 {{ $isOpen ? 'scale-100 opacity-100' : 'scale-95 opacity-0 pointer-events-none' }}"
    >
        <div class="px-4 py-3 border-b border-gray-800/50">
            <p class="text-sm text-gray-400">Signed in as</p>
            <p class="text-sm font-medium text-white truncate">{{ auth()->user()->name }}</p>
        </div>
        <div class="py-1">
            <a
                href="{{ route('profile') }}"
                class="flex items-center w-full gap-3 px-4 py-2 text-gray-300 transition-colors hover:text-white hover:bg-gray-800/50 focus:outline-none focus:text-white focus:bg-gray-800/50"
                role="menuitem"
            >
                <i class="w-5 fas fa-user"></i>
                <span>Profile</span>
            </a>
            <a
                href="{{ route('settings') }}"
                class="flex items-center w-full gap-3 px-4 py-2 text-gray-300 transition-colors hover:text-white hover:bg-gray-800/50 focus:outline-none focus:text-white focus:bg-gray-800/50"
                role="menuitem"
            >
                <i class="w-5 fas fa-cog"></i>
                <span>Settings</span>
            </a>
            @if(auth()->user()->role === 'ADMIN')
            <a
                href="{{ route('admin.index') }}"
                class="flex items-center w-full gap-3 px-4 py-2 text-gray-300 transition-colors hover:text-white hover:bg-gray-800/50 focus:outline-none focus:text-white focus:bg-gray-800/50"
                role="menuitem"
            >
                <i class="w-5 fas fa-shield-alt"></i>
                <span>Admin</span>
            </a>
            @endif
        </div>
        <div class="py-1 border-t border-gray-800/50">
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button
                    type="submit"
                    class="flex items-center w-full gap-3 px-4 py-2 text-left text-gray-300 transition-colors hover:text-white hover:bg-gray-800/50 focus:outline-none focus:text-white focus:bg-gray-800/50"
                    role="menuitem"
                >
                    <i class="w-5 fas fa-sign-out-alt"></i>
                    <span>Logout</span>
                </button>
            </form>
        </div>
    </div>
</div>