LauckCycles/resources/views/components/sidebar.blade.php

<!-- Overlay / Backdrop -->
<div id="sidebar-backdrop" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[60] hidden transition-opacity duration-300 opacity-0 cursor-pointer"></div>

<!-- Sidebar Container -->
<aside id="main-sidebar" class="fixed top-0 left-0 z-[70] h-screen w-72 bg-neutral-100 dark:bg-neutral-900 border-r border-neutral-300 dark:border-neutral-800 shadow-2xl transition-transform duration-300 -translate-x-full flex flex-col">
    
    <!-- Sidebar Header -->
    <div class="flex items-center justify-between p-4 border-b border-neutral-300 dark:border-neutral-800">
        <a href="{{ url('/') }}" class="flex items-center space-x-2 group">
            <div class="h-8 w-8 bg-slate-200 dark:bg-neutral-800 rounded-full flex items-center justify-center border-2 border-transparent group-hover:border-lime-700 group-hover:dark:border-neon-lime transition-all duration-300">
                <svg class="w-5 h-5 dark:text-white group-hover:text-lime-700 group-hover:dark:text-neon-lime transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
            </div>
            <span class="text-xl font-black whitespace-nowrap dark:text-white italic tracking-wide group-hover:text-lime-700 group-hover:dark:text-neon-lime transition-colors duration-300">
                LAUCK<span class="text-lime-700 dark:text-neon-lime font-light not-italic">SYS</span>
            </span>
        </a>
        <button id="close-sidebar-btn" class="p-2 text-neutral-500 hover:text-black dark:text-neutral-400 dark:hover:text-white rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-colors focus:outline-none focus:ring-2 focus:ring-neon-lime">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
    </div>

    <!-- Sidebar Links (Scrollable area) -->
    <div class="flex-1 overflow-y-auto py-4 px-3 space-y-1 scrollbar-thin scrollbar-thumb-neutral-300 dark:scrollbar-thumb-neutral-700">
        
        @auth
            <x-sidebar-link href="{{ url('/dashboard') }}" :active="request()->is('dashboard')" icon="home">
                Inicio
            </x-sidebar-link>
        @endauth
        
        <x-sidebar-link href="{{ url('/catalogo') }}" :active="request()->is('catalogo*')" icon="catalog">
            Catálogo
        </x-sidebar-link>

        @auth
            <div class="pt-4 pb-2">
                <p class="px-3 text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Gestión</p>
            </div>
            
            <x-sidebar-link href="{{ url('/sales') }}" :active="request()->is('sales*')" icon="sales">
                Ventas
            </x-sidebar-link>
            
            <x-sidebar-link href="{{ url('/taller') }}" :active="request()->is('taller*')" icon="workshop">
                Taller
            </x-sidebar-link>

            <x-sidebar-link href="{{ url('/productos') }}" :active="request()->is('productos*')" icon="stock">
                Stock
            </x-sidebar-link>
            
            <x-sidebar-link href="{{ route('tags.index') }}" :active="request()->is('tags*')" icon="tag">
                Etiquetas
            </x-sidebar-link>

            <div class="pt-4 pb-2">
                <p class="px-3 text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Administración</p>
            </div>

            <x-sidebar-link href="{{ url('/clients') }}" :active="request()->is('clients*')" icon="users">
                Clientes
            </x-sidebar-link>

            <x-sidebar-link href="{{ url('/suppliers') }}" :active="request()->is('suppliers*')" icon="truck">
                Proveedores
            </x-sidebar-link>

            <x-sidebar-link href="{{ route('expenses.index') }}" :active="request()->routeIs('expenses.*')" icon="receipt">
                Gastos
            </x-sidebar-link>

            <x-sidebar-link href="{{ route('reports.index') }}" :active="request()->routeIs('reports.*')" icon="chart">
                Reportes
            </x-sidebar-link>

            @if(auth()->user()->role === 'admin')
                <div class="pt-4 pb-2">
                    <p class="px-3 text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Sistema</p>
                </div>
                <x-sidebar-link href="{{ route('admin.backups.index') }}" :active="request()->routeIs('admin.backups.*')" icon="database">
                    Respaldos
                </x-sidebar-link>
                <x-sidebar-link href="{{ route('admin.employees.index') }}" :active="request()->routeIs('admin.employees.*')" icon="users">
                    Empleados
                </x-sidebar-link>
            @endif

            <div class="pt-4 pb-2">
                <p class="px-3 text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Soporte</p>
            </div>

            <x-sidebar-link href="{{ route('faq') }}" :active="request()->routeIs('faq')" icon="question">
                Ayuda/FAQ
            </x-sidebar-link>
        @endauth
    </div>

    <!-- Sidebar Footer -->
    @auth
    <div class="p-4 border-t border-neutral-300 dark:border-neutral-800 bg-neutral-200 dark:bg-neutral-950">
        <div class="mb-3 px-2 flex items-center gap-3">
            <div class="w-8 h-8 rounded-full bg-lime-500 dark:bg-neon-lime text-black flex items-center justify-center font-bold text-sm">
                {{ substr(auth()->user()->name, 0, 1) }}
            </div>
            <div class="flex flex-col">
                <span class="text-sm font-bold text-black dark:text-white">{{ auth()->user()->name }}</span>
                <span class="text-xs text-neutral-500 dark:text-neutral-400">{{ ucfirst(auth()->user()->role) == 'Admin' ? 'Admin': 'Empleado' }}</span>
            </div>
        </div>
        <form action="{{ route('logout') }}" method="post" class="w-full">
            @csrf
            <button class="w-full flex items-center justify-center gap-2 font-bold text-sm text-red-600 dark:text-red-500 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 py-2.5 px-4 rounded-lg hover:bg-red-600 hover:text-white hover:border-red-600 dark:hover:bg-red-600 dark:hover:text-white transition-all duration-300 tracking-wide" type="submit">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
                Cerrar Sesión
            </button>
        </form>
    </div>
    @endauth

    @guest
    <div class="p-4 border-t border-neutral-300 dark:border-neutral-800 bg-neutral-200 dark:bg-neutral-950">
        <a href="{{ route('login') }}" class="w-full flex items-center justify-center gap-2 font-black text-sm text-neon-lime dark:text-neutral-900 bg-neutral-900 dark:bg-neon-lime py-3 px-4 rounded-lg hover:dark:bg-[#b3e600] transition-colors uppercase tracking-wider shadow-lg shadow-gray-300 dark:shadow-neon-lime/20">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
            Ingresar
        </a>
    </div>
    @endguest

</aside>