<nav class="w-full bg-white shadow px-4 py-3 flex items-center justify-between  left-0 z-50">
               

                    <!-- Ícone hambúrguer (aparece só no mobile) -->
                    <button id="menuBtn" class="lg:hidden text-gray-700 text-3xl">
                        ☰
                    </button>

                    <div class="font-bold text-xl">
                        <span class="text-blue-600">
                            <a href="{{route('dashboard.client.home')}}">ZEINER</a>                            
                        </span>
                    </div>

                    <div class="relative" id="userMenuWrapper">

                        <!-- Botão -->
                        <button id="userMenuBtn" class="flex items-center gap-2 text-gray-700 hover:text-blue-600">
                            <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold">
                                <img class="w-8" src="{{asset('imgs/zeiner-white-logo.png')}}" />
                            </div>
                            @if (session()->has('user'))
                                    <span>Olá, {{ session()->get('user.name') }}!</span>
                            @endif

                            <span class="text-xs">▼</span>
                        </button>
                        <!-- Dropdown -->
                        <div id="userMenu"
                             class="hidden absolute right-0 mt-2 w-64 bg-white shadow-lg border rounded-md overflow-hidden z-50">

                            <div class="px-4 py-3 border-b">
                                <p class="font-semibold text-gray-700">{{ session()->has('user') ?  session()->get('user.name') : '' }}</p>
                                <p class="text-sm text-gray-500">{{ session()->has('user') ? session()->get('user.email') : '' }}</p>
                            </div>

                            <ul class="py-2 text-gray-700">
                                <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Mudar de conta</li>
                                <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">PIN de Suporte: 308533</li>
                                <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Os Meus Dados</li>
                                <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Gerenciamento de usuários</li>
                                <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Contactos/Sub-Contactos</li>
                                <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Login Único</li>
                                <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">E-mails Enviados</li>
                                <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Histórico de Login</li>
                            </ul>

                            <div class="border-t py-2">
                                <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">O seu perfil</li>
                                <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Alterar senha</li>
                                <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Segurança da Conta</li>
                            </div>

                            <div class="border-t">
                                <li wire:click='logout' class="px-4 py-2 hover:bg-gray-100 cursor-pointer text-red-600 font-semibold">Sair</li>
                            </div>
                        </div>
                    </div>
        </nav>