ilycats/resources/views/layouts/navigation-sidebar.blade.php

<aside class="w-72 bg-white border-r border-slate-200 hidden lg:flex flex-col sticky top-0 h-screen transition-all shadow-sm">
    
    @php
        $appSettings = \Illuminate\Support\Facades\Cache::remember('app_sidebar_settings', 3600, function() {
            return \App\Models\Setting::whereIn('key', ['app_logo', 'app_name'])->pluck('value', 'key');
        });
        $appName = $appSettings['app_name'] ?? 'Ily Cattery';

        $lowMedicinesCount = \App\Models\Medicine::where('qty', '<', 5)->count();
        $lowFoodsCount = \App\Models\Food::where('qty', '<', 5)->count();
    @endphp

    {{-- Brand Header --}}
    <div class="p-8 flex items-center gap-4">
        <div class="w-12 h-12 bg-indigo-600 rounded-[1.25rem] flex items-center justify-center shadow-xl shadow-indigo-100">
            <i class="fas fa-cat text-white text-xl"></i>
        </div>
        <div class="min-w-0">
            <h1 class="text-sm font-black text-slate-800 uppercase tracking-tighter truncate leading-none mb-1">{{ $appName }}</h1>
            <p class="text-[9px] font-black text-slate-400 uppercase tracking-[0.2em] leading-none">Management System</p>
        </div>
    </div>

    {{-- Navigation Links --}}
    <nav class="flex-1 px-4 space-y-1 overflow-y-auto custom-scrollbar">
        
        <x-sidebar-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" icon="fa-th-large">
            Dashboard
        </x-sidebar-link>

        {{-- OPERASIONAL --}}
        @if(Gate::allows('check-access', ['cats', 'read']) || Gate::allows('check-access', ['matting', 'read']))
            <div class="pt-6 pb-2 px-5 text-[9px] font-black text-slate-400 uppercase tracking-[0.3em] flex items-center gap-3">
                <span>Operasional</span>
                <div class="h-px bg-slate-100 flex-1"></div>
            </div>

            @can('check-access', ['cats', 'read'])
            <x-sidebar-link :href="route('cats.index')" :active="request()->routeIs('cats.*')" icon="fa-paw">
                Data Kucing
            </x-sidebar-link>
            @endcan

            @can('check-access', ['matting', 'read'])
            <x-sidebar-link :href="route('matting.index')" :active="request()->routeIs('matting.*')" icon="fa-venus-mars">
                <span class="flex-1">Matting Cat</span>
                <span class="text-[8px] bg-emerald-100 text-emerald-600 px-1.5 py-0.5 rounded font-black uppercase italic">Breeding</span>
            </x-sidebar-link>
            @endcan
        @endif

        {{-- LOGISTIK (CONTOH DROPDOWN) --}}
        @if(Gate::allows('check-access', ['medicines', 'read']) || Gate::allows('check-access', ['foods', 'read']) || Gate::allows('check-access', ['supplies', 'read']) || Gate::allows('check-access', ['categories', 'read']))
            <div class="pt-6 pb-2 px-5 text-[9px] font-black text-slate-400 uppercase tracking-[0.3em] flex items-center gap-3">
                <span>Inventori</span>
                <div class="h-px bg-slate-100 flex-1"></div>
            </div>

            {{-- Parent Dropdown Logistik --}}
            <div x-data="{ open: {{ request()->routeIs('inventory.*') || request()->routeIs('categories.*') ? 'true' : 'false' }} }">
                <button @click="open = !open" 
                    class="w-full flex items-center gap-3 px-5 py-3 text-xs font-bold rounded-2xl transition-all {{ request()->routeIs('inventory.*') ? 'bg-indigo-50 text-indigo-600' : 'text-slate-500 hover:bg-slate-50' }}">
                    <i class="fas fa-box-open w-5 text-center"></i>
                    <span class="flex-1 text-left">Gudang Logistik</span>
                    <i class="fas fa-chevron-down text-[10px] transition-transform duration-200" :class="open ? 'rotate-180' : ''"></i>
                </button>

                {{-- Sub-menu Items --}}
                <div x-show="open" x-cloak x-collapse class="mt-1 ml-4 pl-4 border-l border-slate-100 space-y-1">
                    @can('check-access', ['medicines', 'read'])
                    <x-sidebar-link :href="route('inventory.medicines.index')" :active="request()->routeIs('inventory.medicines.*')" icon="fa-pills">
                        <span class="flex-1">Obat & Vitamin</span>
                        @if($lowMedicinesCount > 0)
                            <span class="bg-rose-500 text-white text-[9px] font-black px-2 py-0.5 rounded-lg animate-pulse">{{ $lowMedicinesCount }}</span>
                        @endif
                    </x-sidebar-link>
                    @endcan

                    @can('check-access', ['foods', 'read'])
                    <x-sidebar-link :href="route('inventory.foods.index')" :active="request()->routeIs('inventory.foods.*')" icon="fa-bowl-food">
                        <span class="flex-1">Stok Makanan</span>
                        @if($lowFoodsCount > 0)
                            <span class="bg-rose-500 text-white text-[9px] font-black px-2 py-0.5 rounded-lg">{{ $lowFoodsCount }}</span>
                        @endif
                    </x-sidebar-link>
                    @endcan

                    @can('check-access', ['supplies', 'read'])
                    <x-sidebar-link :href="route('inventory.supplies.index')" :active="request()->routeIs('inventory.supplies.*')" icon="fa-box-archive">
                        Perlengkapan
                    </x-sidebar-link>
                    @endcan

                    @can('check-access', ['categories', 'read'])
                    <x-sidebar-link :href="route('categories.index')" :active="request()->routeIs('categories.*')" icon="fa-tags">
                        Master Kategori
                    </x-sidebar-link>
                    @endcan
                </div>
            </div>
        @endif

        {{-- INTELLIGENCE --}}
        @if(Gate::allows('check-access', ['reports', 'read']) || Gate::allows('check-access', ['matting_reports', 'read']))
            <div class="pt-6 pb-2 px-5 text-[9px] font-black text-indigo-500 uppercase tracking-[0.3em] flex items-center gap-3">
                <span>Intelligence</span>
                <div class="h-px bg-indigo-50 flex-1"></div>
            </div>

            @can('check-access', ['reports', 'read'])
            <x-sidebar-link :href="route('admin.reports.index')" :active="request()->routeIs('admin.reports.index')" icon="fa-chart-line">
                Pusat Laporan
            </x-sidebar-link>
            @endcan

            @can('check-access', ['matting_reports', 'read'])
            <x-sidebar-link :href="route('admin.reports.matting.index')" :active="request()->routeIs('admin.reports.matting')" icon="fa-file-medical">
                <span class="flex-1">Laporan Breeding</span>
                <span class="text-[8px] bg-rose-100 text-rose-600 px-1.5 py-0.5 rounded font-black uppercase shadow-sm">Special</span>
            </x-sidebar-link>
            @endcan
        @endif

        {{-- KONFIGURASI (DROPDOWN) --}}
        @if(Gate::allows('check-access', ['users', 'read']) || Gate::allows('check-access', ['roles', 'read']) || Gate::allows('check-access', ['logs', 'read']) || Gate::allows('check-access', ['settings', 'read']))
            <div class="pt-8 pb-2 px-5 text-[9px] font-black text-rose-500 uppercase tracking-[0.3em] flex items-center gap-3">
                <span>Konfigurasi</span>
                <div class="h-px bg-rose-50 flex-1"></div>
            </div>

            <div x-data="{ open: {{ request()->routeIs('admin.users.*') || request()->routeIs('admin.roles.*') || request()->routeIs('admin.settings.*') ? 'true' : 'false' }} }">
                <button @click="open = !open" 
                    class="w-full flex items-center gap-3 px-5 py-3 text-xs font-bold rounded-2xl transition-all {{ request()->routeIs('admin.*') ? 'bg-rose-50 text-rose-600' : 'text-slate-500 hover:bg-slate-50' }}">
                    <i class="fas fa-cog w-5 text-center"></i>
                    <span class="flex-1 text-left">Sistem Control</span>
                    <i class="fas fa-chevron-down text-[10px] transition-transform duration-200" :class="open ? 'rotate-180' : ''"></i>
                </button>

                <div x-show="open" x-cloak x-collapse class="mt-1 ml-4 pl-4 border-l border-rose-100 space-y-1">
                    @can('check-access', ['users', 'read'])
                    <x-sidebar-link :href="route('admin.users.index')" :active="request()->routeIs('admin.users.*')" icon="fa-users-cog">
                        Manajemen User
                    </x-sidebar-link>
                    @endcan

                    @can('check-access', ['roles', 'read'])
                    <x-sidebar-link :href="route('admin.roles.index')" :active="request()->routeIs('admin.roles.*')" icon="fa-user-shield">
                        Role Management
                    </x-sidebar-link>
                    @endcan

                    @can('check-access', ['logs', 'read'])
                    <x-sidebar-link :href="route('admin.logs.index')" :active="request()->routeIs('admin.logs.*')" icon="fa-history">
                        Log Audit
                    </x-sidebar-link>   
                    @endcan

                    @can('check-access', ['settings', 'read'])
                    <x-sidebar-link :href="route('admin.settings.index')" :active="request()->routeIs('admin.settings.*')" icon="fa-sliders-h">
                        Pengaturan Sistem
                    </x-sidebar-link>
                    @endcan
                </div>
            </div>
        @endif
    </nav>
</aside>