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

@php
    $appName = \App\Models\Setting::where('key', 'app_name')->value('value') ?? 'ILY Cattery';
    $appLogo = \App\Models\Setting::where('key', 'app_logo')->value('value');
    $lowObatsCount = \App\Models\Medicine::where('qty', '<', 5)->count();
    $lowMakananCount = \App\Models\Food::where('qty', '<', 5)->count();
@endphp

<div x-show="sidebarOpen" x-cloak @click="sidebarOpen=false" class="fixed inset-0 z-30 bg-slate-900/30 lg:hidden"></div>
<aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'"
       class="fixed inset-y-0 left-0 z-40 flex w-64 shrink-0 flex-col border-r border-slate-200 bg-white transition-transform duration-200 lg:static lg:z-auto">
    <div class="flex h-16 items-center gap-3 border-b border-slate-200 px-5">
        @if($appLogo)
            <img src="{{ Storage::url($appLogo) }}" alt="Logo {{ $appName }}" class="h-9 w-9 rounded-lg object-contain">
        @else
            <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-600 text-white"><i class="fas fa-cat"></i></div>
        @endif
        <div class="min-w-0">
            <div class="truncate text-sm font-bold text-slate-900">{{ $appName }}</div>
            <div class="text-xs text-slate-500">Manajemen cattery</div>
        </div>
        <button @click="sidebarOpen=false" class="ml-auto p-2 text-slate-400 lg:hidden" aria-label="Tutup menu"><i class="fas fa-times"></i></button>
    </div>

    <nav class="flex-1 overflow-y-auto px-3 py-4">
        <div class="space-y-1">
            <x-sidebar-link :href="route('dashboard')" :active="request()->routeIs('dashboard') && !request()->boolean('weight_focus')" icon="fa-house" tone="indigo">Beranda</x-sidebar-link>
            <x-sidebar-link :href="route('dashboard', ['weight_focus' => 1]) . '#pemantauan-berat'" :active="request()->routeIs('dashboard') && request()->boolean('weight_focus')" icon="fa-weight-scale" tone="blue">Berat badan</x-sidebar-link>
        </div>

        @if(Gate::allows('check-access', ['cats','read']) || Gate::allows('check-access', ['matting','read']) || Gate::allows('check-access', ['treatments','read']))
        <div class="mt-6">
            <p class="px-3 pb-2 text-xs font-semibold text-slate-400">Operasional</p>
            <div class="space-y-1">
                @can('check-access', ['cats','read'])
                    <x-sidebar-link :href="route('cats.index')" :active="request()->routeIs('cats.*')" icon="fa-cat" tone="sky">Data kucing</x-sidebar-link>
                @endcan
                @can('check-access', ['matting','read'])
                    <x-sidebar-link :href="route('matting.index')" :active="request()->routeIs('matting.*')" icon="fa-paw" tone="rose">Perkawinan & pembiakan</x-sidebar-link>
                @endcan
                @can('check-access', ['treatments','read'])
                    <x-sidebar-link :href="route('treatments.index')" :active="request()->routeIs('treatments.*')" icon="fa-notes-medical" tone="emerald">Rekam medis</x-sidebar-link>
                @endcan
                @can('check-access', ['medical_insights','read'])
                    <x-sidebar-link :href="route('medical.dashboard')" :active="request()->routeIs('medical.dashboard')" icon="fa-heart-pulse" tone="rose">Ringkasan kesehatan</x-sidebar-link>
                @endcan
            </div>
        </div>
        @endif

        @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="mt-6">
            <div class="flex items-center justify-between px-3 pb-2">
                <p class="text-xs font-semibold text-slate-400">Inventori</p>
                @if(($lowObatsCount+$lowMakananCount)>0)<span class="rounded bg-rose-50 px-1.5 py-0.5 text-xs font-semibold text-rose-600">{{ $lowObatsCount+$lowMakananCount }}</span>@endif
            </div>
            <div class="space-y-1">
                @can('check-access', ['medicines','read'])<x-sidebar-link :href="route('inventory.medicines.index')" :active="request()->routeIs('inventory.medicines.*')" icon="fa-pills" tone="violet">Obat & vitamin</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" tone="amber">Makanan</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-open" tone="cyan">Perlengkapan</x-sidebar-link>@endcan
                @can('check-access', ['categories','read'])<x-sidebar-link :href="route('categories.index')" :active="request()->routeIs('categories.*')" icon="fa-tags" tone="slate">Kategori</x-sidebar-link>@endcan
            </div>
        </div>
        @endif

        @if(Gate::allows('check-access', ['reports','read']) || Gate::allows('check-access', ['matting_reports','read']))
        <div class="mt-6">
            <p class="px-3 pb-2 text-xs font-semibold text-slate-400">Laporan</p>
            <div class="space-y-1">
                @can('check-access', ['reports','read'])<x-sidebar-link :href="route('admin.reports.index')" :active="request()->routeIs('admin.reports.index')" icon="fa-chart-line" tone="blue">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-lines" tone="rose">Laporan pembiakan</x-sidebar-link>@endcan
            </div>
        </div>
        @endif

        @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="mt-6">
            <p class="px-3 pb-2 text-xs font-semibold text-slate-400">Administrasi</p>
            <div class="space-y-1">
                @can('check-access', ['users','read'])<x-sidebar-link :href="route('admin.users.index')" :active="request()->routeIs('admin.users.*')" icon="fa-user-group" tone="sky">Pengguna</x-sidebar-link>@endcan
                @can('check-access', ['roles','read'])<x-sidebar-link :href="route('admin.roles.index')" :active="request()->routeIs('admin.roles.*')" icon="fa-shield-halved" tone="violet">Hak akses</x-sidebar-link>@endcan
                @can('check-access', ['logs','read'])<x-sidebar-link :href="route('admin.logs.index')" :active="request()->routeIs('admin.logs.*')" icon="fa-clock-rotate-left" tone="amber">Jejak aktivitas</x-sidebar-link>@endcan
                @can('check-access', ['settings','read'])<x-sidebar-link :href="route('admin.settings.index')" :active="request()->routeIs('admin.settings.*')" icon="fa-gear" tone="slate">Pengaturan</x-sidebar-link>@endcan
            </div>
        </div>
        @endif
    </nav>

    <div class="border-t border-slate-200 p-4">
        <div class="mb-3 flex items-center gap-3 px-1">
            <div class="flex h-8 w-8 items-center justify-center rounded-full bg-slate-100 text-xs font-bold text-slate-700">{{ strtoupper(substr(auth()->user()->name,0,1)) }}</div>
            <div class="min-w-0"><p class="truncate text-sm font-semibold text-slate-800">{{ auth()->user()->name }}</p><p class="truncate text-xs text-slate-500">{{ auth()->user()->roleModel?->name ?? auth()->user()->getRawOriginal('role') ?? 'Pengguna' }}</p></div>
        </div>
        <form method="POST" action="{{ route('logout') }}">@csrf
            <button class="flex w-full items-center gap-3 px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-rose-600"><i class="fas fa-right-from-bracket w-5"></i>Keluar</button>
        </form>
    </div>
</aside>