From d16f454083af404576a4f9b2baf4671b224a596b Mon Sep 17 00:00:00 2001
From: Dwi F Sukmana <dwi.sukmana@gmail.com>
Date: Mon, 9 Feb 2026 09:53:54 +0700
Subject: [PATCH] perbaikan sidebar

---
 .../layouts/navigation-sidebar.blade.php      | 146 +++++++++---------
 1 file changed, 74 insertions(+), 72 deletions(-)

diff --git a/resources/views/layouts/navigation-sidebar.blade.php b/resources/views/layouts/navigation-sidebar.blade.php
index 2dc6b0f..6655866 100644
--- a/resources/views/layouts/navigation-sidebar.blade.php
+++ b/resources/views/layouts/navigation-sidebar.blade.php
@@ -6,7 +6,6 @@
         });
         $appName = $appSettings['app_name'] ?? 'Ily Cattery';
 
-        // Hitung stok kritis untuk badge (TETAP UTUH)
         $lowMedicinesCount = \App\Models\Medicine::where('qty', '<', 5)->count();
         $lowFoodsCount = \App\Models\Food::where('qty', '<', 5)->count();
     @endphp
@@ -25,7 +24,6 @@
     {{-- Navigation Links --}}
     <nav class="flex-1 px-4 space-y-1 overflow-y-auto custom-scrollbar">
         
-        {{-- Dashboard biasanya dapat diakses oleh semua user terautentikasi --}}
         <x-sidebar-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" icon="fa-th-large">
             Dashboard
         </x-sidebar-link>
@@ -51,62 +49,55 @@
             @endcan
         @endif
 
-        {{-- KESEHATAN --}}
-        @if(Gate::allows('check-access', ['medical_insights', 'read']) || Gate::allows('check-access', ['treatments', '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>Kesehatan</span>
-                <div class="h-px bg-slate-100 flex-1"></div>
-            </div>
-
-            @can('check-access', ['medical_insights', 'read'])
-            <x-sidebar-link :href="route('medical.dashboard')" :active="request()->routeIs('medical.dashboard')" icon="fa-chart-pie">
-                Medical Insight
-            </x-sidebar-link>
-            @endcan
-
-            @can('check-access', ['treatments', 'read'])
-            <x-sidebar-link :href="route('treatments.index')" :active="request()->routeIs('treatments.*')" icon="fa-notes-medical">
-                Rekam Medis
-            </x-sidebar-link>
-            @endcan
-        @endif
-
-        {{-- LOGISTIK --}}
+        {{-- 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>Logistik</span>
+                <span>Inventori</span>
                 <div class="h-px bg-slate-100 flex-1"></div>
             </div>
-            
-            @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
+            {{-- 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>
 
-            @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
+                {{-- 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', ['categories', 'read'])
-            <x-sidebar-link :href="route('categories.index')" :active="request()->routeIs('categories.*')" icon="fa-tags">
-                Master Kategori
-            </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 --}}
@@ -130,36 +121,47 @@
             @endcan
         @endif
 
-        {{-- KONFIGURASI (Hanya tampil untuk yang memiliki akses ke modul-modul ini) --}}
+        {{-- 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>
 
-            @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
+            <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>
 
-            @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
+                <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', ['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', ['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', ['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
+                    @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>
\ No newline at end of file