singleloginsystem/resources/views/components/dashboard-sidebar.blade.php

<?php

use Livewire\Component;

new class extends Component {
    /** Collapsed = icons-only mode */
    public bool $collapsed = false;

    public function mount(): void
    {
        $this->collapsed = session('sidebar_collapsed', false);
    }

    public function toggle(): void
    {
        $this->collapsed = !$this->collapsed;
        session(['sidebar_collapsed' => $this->collapsed]);
    }

    public function navItems(): array
    {
        return [
            [
                'label' => 'Dashboard',
                'icon' => 'lucide.house',
                'route' => 'dashboard',
                'active_pattern' => 'dashboard',
            ],
            [
                'label' => 'Users',
                'icon' => 'lucide.users',
                'route' => 'home',
                'active_pattern' => 'home',
            ],
            [
                'label' => 'Apps',
                'icon' => 'lucide.grid-2x2-plus',
                'route' => 'connected-apps.index',
                // Using a wildcard ensures the tab stays active on nested routes like connected-apps.edit
                'active_pattern' => 'connected-apps.*',
            ],
        ];
    }
};
?>
<aside
    x-data="{ collapsed: @entangle('collapsed') }"
    :class="collapsed ? 'w-12' : 'w-64'"
    class="relative flex flex-col h-screen bg-white border-r border-gray-100
           transition-[width] duration-300 ease-in-out shrink-0 overflow-hidden"
    :aria-expanded="String(!collapsed)"
>

    <div class="flex items-center h-20 px-2 border-b border-gray-100 shrink-0">
        <a
            href="{{ route('dashboard') }}"
            wire:navigate
            class="shrink-0 flex items-center justify-center w-8 h-8
                   rounded-lg bg-blue-600 text-gray-50
                   shadow-sm  focus-visible:outline-none
                   focus-visible:ring-2 focus-visible:ring-cyan-400"
            aria-label="Go to dashboard"
        >
            <x-mary-icon name='lucide.shield-cog' class="w-6 h-6"/>
        </a>

        <span
            x-cloak
            x-show="!collapsed"
            x-transition:enter="transition-all duration-200 delay-150 ease-out"
            x-transition:enter-start="opacity-0 -translate-x-2"
            x-transition:enter-end="opacity-100 translate-x-0"
            x-transition:leave="transition-opacity duration-100"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
            class="ml-3 text-sm font-semibold text-gray-900 whitespace-nowrap tracking-tight"
        >
            <h1 class="text-lg">Company SSO</h1>
            <h2 class="text-sm font-light">Admin Panel</h2>
        </span>
    </div>

    <nav
        class="flex-1 py-3 px-2 space-y-0.5 overflow-y-auto overflow-x-hidden"
        aria-label="Main navigation"
    >
        @foreach ($this->navItems() as $item)
            {{-- Check if the current route matches the pattern --}}
            @php $isActive = request()->routeIs($item['active_pattern']); @endphp

            <a
                href="{{ route($item['route']) }}"
                wire:navigate
                @class([
                    'group relative flex items-center gap-3 px-2 py-2.5 rounded-lg',
                    'text-sm font-medium transition-colors duration-150',
                    'bg-gray-100 text-gray-900' => $isActive,
                    'text-gray-500 hover:bg-gray-50 hover:text-gray-800' => ! $isActive,
                ])
                aria-current="{{ $isActive ? 'page' : 'false' }}"
            >
                {{-- Active pill indicator --}}
                @if ($isActive)
                    <span
                        class="absolute left-0 inset-y-2 w-0.5 rounded-r-full bg-blue-600"
                        aria-hidden="true"
                    ></span>
                @endif

                <x-mary-icon :name="$item['icon']" class="w-4 h-4"/>

                {{-- Label — hidden when collapsed --}}
                <span
                    x-cloak
                    x-show="!collapsed"
                    x-transition:enter="transition-opacity duration-200 delay-100"
                    x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100"
                    x-transition:leave="transition-opacity duration-75"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"
                    class="whitespace-nowrap overflow-hidden leading-none"
                >
                    {{ $item['label'] }}
                </span>

                {{-- Tooltip — only rendered & visible in collapsed mode --}}
                <span
                    x-cloak
                    x-show="collapsed"
                    role="tooltip"
                    class="pointer-events-none absolute left-full ml-3 z-50
                           whitespace-nowrap rounded-md bg-gray-900 px-2.5 py-1.5
                           text-xs font-medium text-white shadow-xl
                           opacity-0 group-hover:opacity-100
                           transition-opacity duration-150 delay-75"
                >
                    {{ $item['label'] }}
                    {{-- Arrow --}}
                    <span
                        class="absolute right-full top-1/2 -translate-y-1/2
                               border-[5px] border-transparent border-r-gray-900"
                        aria-hidden="true"
                    ></span>
                </span>
            </a>
        @endforeach
    </nav>

    <div class="border-t border-gray-100 px-2 py-3 shrink-0">
        <button
            wire:click="toggle"
            type="button"
            class="group w-full flex items-center gap-3 px-2 py-2.5 rounded-lg
                   text-sm font-medium text-gray-400
                   hover:bg-gray-50 hover:text-gray-700
                   transition-colors duration-150
                   focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-400"
            :aria-label="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
        >
            <span class="flex-shrink-0 flex items-center justify-center w-5 h-5" aria-hidden="true">
                <svg
                    :class="collapsed ? 'rotate-180' : 'rotate-0'"
                    class="w-4 h-4 transition-transform duration-300 ease-in-out"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="2"
                    stroke="currentColor"
                >
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"/>
                </svg>
            </span>

            <span
                x-cloak
                x-show="!collapsed"
                x-transition:enter="transition-opacity duration-200 delay-100"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="transition-opacity duration-75"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                class="whitespace-nowrap"
            >
                Collapse
            </span>
        </button>
    </div>
</aside>