nimuli/resources/views/components/topbar.blade.php

@php
    $user = auth()->user();
    $userName = $user?->name ?? '';
    $initials = collect(explode(' ', trim($userName)))->map(fn($w) => strtoupper(substr($w, 0, 1)))->take(2)->implode('');
    if (!$initials && $user) {
        $initials = strtoupper(substr($user->email, 0, 2));
    }
@endphp

<header class="h-14 flex-shrink-0 bg-s1/80 backdrop-blur-sm border-b border-white/[.06] flex items-center justify-between px-4 gap-4 sticky top-0 z-30">
    <!-- Left: Hamburger (mobile) + Title -->
    <div class="flex items-center gap-3 min-w-0">
        <!-- Mobile hamburger -->
        <button
            class="md:hidden text-t2 hover:text-t1 transition-colors p-1 -ml-1"
            @click="$store.sidebar.open = !$store.sidebar.open"
            aria-label="Toggle sidebar"
        >
            <svg class="w-5 h-5" fill="none" viewBox="0 0 20 20" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 6h14M3 10h14M3 14h14"/>
            </svg>
        </button>

        <!-- Page title -->
        @if(!empty($title))
            <h1 class="text-sm font-medium text-t1 truncate">{{ $title }}</h1>
        @endif
    </div>

    <!-- Right: Actions -->
    <div class="flex items-center gap-1 flex-shrink-0">
        <!-- Theme Toggle -->
        <button
            @click="$store.theme.cycle()"
            class="w-8 h-8 flex items-center justify-center rounded-lg text-t2 hover:text-t1 hover:bg-s2 transition-colors"
            :title="'Theme: ' + $store.theme.current"
            aria-label="Toggle theme"
        >
            <template x-if="$store.theme.current === 'dark'">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M8 1v1.5M8 13.5V15M1 8h1.5M13.5 8H15M3.5 3.5l1 1M11.5 11.5l1 1M11.5 4.5l1-1M3.5 12.5l1-1"/>
                    <circle cx="8" cy="8" r="3"/>
                </svg>
            </template>
            <template x-if="$store.theme.current === 'light'">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M8 3a5 5 0 100 10A5 5 0 008 3z" clip-rule="evenodd"/>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M11.5 4.5a5 5 0 01-7 7A5 5 0 0111.5 4.5z"/>
                </svg>
            </template>
            <template x-if="$store.theme.current === 'system'">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
                    <rect x="2" y="2" width="12" height="9" rx="1.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M5.5 14.5h5M8 11.5v3"/>
                </svg>
            </template>
        </button>

        <!-- Notifications Bell -->
        <livewire:components.notifications-bell />

        <!-- User Dropdown -->
        <div class="relative ml-1" x-data="{ userOpen: false }">
            <button
                @click="userOpen = !userOpen"
                class="w-8 h-8 rounded-full bg-accent-gradient flex items-center justify-center text-white text-xs font-bold hover:opacity-90 transition-opacity"
                aria-label="User menu"
            >
                {{ $initials }}
            </button>

            <!-- Dropdown -->
            <div
                x-show="userOpen"
                @click.outside="userOpen = false"
                x-transition:enter="transition ease-out duration-100"
                x-transition:enter-start="opacity-0 scale-95 translate-y-1"
                x-transition:enter-end="opacity-100 scale-100 translate-y-0"
                x-transition:leave="transition ease-in duration-75"
                x-transition:leave-start="opacity-100 scale-100 translate-y-0"
                x-transition:leave-end="opacity-0 scale-95 translate-y-1"
                class="absolute right-0 top-10 w-52 bg-s2 border border-white/[.06] rounded-xl shadow-xl py-1 z-50"
            >
                <!-- User info -->
                <div class="px-4 py-2.5 border-b border-white/[.06]">
                    <div class="text-sm font-medium text-t1 truncate">{{ $userName }}</div>
                    <div class="text-xs text-t3 truncate">{{ $user?->email }}</div>
                </div>

                <!-- Links -->
                <div class="py-1">
                    <a
                        href="{{ route('profile.personal') }}"
                        wire:navigate
                        @click="userOpen = false"
                        class="flex items-center gap-2.5 px-4 py-2 text-sm text-t2 hover:text-t1 hover:bg-s3 transition-colors"
                    >
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
                            <circle cx="8" cy="5" r="2.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.5 14c0-3 2.5-5 5.5-5s5.5 2 5.5 5"/>
                        </svg>
                        Profile
                    </a>
                </div>

                <div class="border-t border-white/[.06] py-1">
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button
                            type="submit"
                            class="w-full flex items-center gap-2.5 px-4 py-2 text-sm text-red hover:bg-s3 transition-colors"
                        >
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 11.5l3-3.5-3-3.5M13.5 8H6M6 2.5H3a1 1 0 00-1 1v9a1 1 0 001 1h3"/>
                            </svg>
                            Sign out
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</header>