eric / rustwarden

<!-- User Menu with DaisyUI and Alpine.js -->
<div class="dropdown dropdown-end" 
     x-data="{ open: false }"
     @click.away="open = false">
    <!-- User Menu Button -->
    <button type="button"
           @click.stop="open = !open"
           class="btn btn-ghost flex items-center gap-3 normal-case cursor-pointer">
        <!-- Avatar with initials -->
        <div class="avatar placeholder">
            <div class="bg-primary text-primary-content rounded-full w-10 h-10"
                 style="background-color: {{ avatar_color }} !important;">
                <span class="text-sm font-semibold">{{ initials }}</span>
            </div>
        </div>
        
        <!-- Username (hidden on small screens) -->
        <div class="hidden lg:block text-left">
            <div class="text-sm font-medium text-base-content">{{ username }}</div>
            <div class="text-xs text-base-content/60">{{ email }}</div>
        </div>
        
        <!-- Dropdown Arrow -->
        <svg class="w-4 h-4 text-base-content transition-transform duration-200" 
             :class="{ 'rotate-180': open }"
             fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
    </button>
    
    <!-- Dropdown Menu -->
    <ul x-show="open"
        x-cloak
        x-transition:enter="transition ease-out duration-100"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-75"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="dropdown-content menu bg-base-100 rounded-box z-[1] w-64 p-2 shadow-lg border border-base-300 mt-2">
        {% include "fragments/user_menu_dropdown.html" %}
    </ul>
</div>