    <aside id="sidebar"
    class="fixed top-0 left-0 h-full w-64 bg-white shadow-lg transform -translate-x-full lg:translate-x-0 transition-transform duration-300 z-50">

    <!-- TOP (mobile) -->
    <div class="flex items-center justify-between px-4 py-4 border-b lg:hidden">
        <span class="text-lg font-semibold text-gray-700">Painel do Cliente</span>

        <!-- Ícone para FECHAR -->
        <button id="closeSidebar" class="text-3xl text-gray-700">
            ✕
        </button>
    </div>

    <!-- TOP (desktop) -->
    <div class="hidden lg:block mt-16 px-6 py-4 border-b">
        <h2 class="text-lg font-semibold text-gray-700">Painel do Cliente</h2>
    </div>

    <!-- Links -->
    <nav class="mt-4 space-y-2 px-6">
        <a class="block py-2 text-gray-700 hover:text-blue-600" href="{{route('dashboard.client.home')}}">Área do Cliente</a>
        <a class="block py-2 text-gray-700 hover:text-blue-600" href="#">Meus Serviços</a>
        <a class="block py-2 text-gray-700 hover:text-blue-600" href="#">Faturação</a>
        <a class="block py-2 text-gray-700 hover:text-blue-600" href="#">Tickets</a>
    </nav>


</aside>


