From 1a24b18719a10e1df153320ae0772af05e37c005 Mon Sep 17 00:00:00 2001
From: arifal <arifalhidayat10@gmail.com>
Date: Fri, 12 Sep 2025 13:06:22 +0700
Subject: [PATCH] fix collapse sidebar when active

---
 .../views/layouts/partials/sidebar.blade.php  | 72 +++++++++++++++++--
 1 file changed, 66 insertions(+), 6 deletions(-)

diff --git a/resources/views/layouts/partials/sidebar.blade.php b/resources/views/layouts/partials/sidebar.blade.php
index 7bbae35..14ddefe 100644
--- a/resources/views/layouts/partials/sidebar.blade.php
+++ b/resources/views/layouts/partials/sidebar.blade.php
@@ -17,10 +17,22 @@
           <li class="menu-title">Menu</li>
 
           @php
+          // Menentukan apakah sebuah menu (atau anaknya) aktif berdasarkan request('menu_id')
+          function isActiveMenu($menu, $currentId) {
+               if (!$currentId) return false;
+               if ((string)$menu->id === (string)$currentId) return true;
+               foreach ($menu->children as $child) {
+                    if (isActiveMenu($child, $currentId)) return true;
+               }
+               return false;
+          }
+
           function renderMenu($menus) {
+               $currentMenuId = request('menu_id');
                foreach ($menus as $menu) {
                     $collapseId = "sidebar-" . $menu->id;
                     $hasChildren = $menu->children->count() > 0;
+                    $isActive = isActiveMenu($menu, $currentMenuId);
 
                     // Pastikan route tersedia dan boleh ditampilkan
                     $menuUrl = '#';
@@ -28,14 +40,14 @@
                          if (Route::has($menu->url)) {
                               $menuUrl = route($menu->url, ['menu_id' => $menu->id]);
                          } else {
-                              $menuUrl = $menu->url . '?menu_id=' . $menu->id;
+                              $menuUrl = $menu->url . (strpos($menu->url, '?') !== false ? '&' : '?') . 'menu_id=' . $menu->id;
                          }
                     }
 
-                    echo '<li class="nav-item ' . ($hasChildren ? 'has-children' : '') . '">';
-                    echo '<a class="nav-link ' . ($hasChildren ? 'menu-arrow' : '') . '" 
+                    echo '<li class="nav-item ' . ($hasChildren ? 'has-children' : '') . ' ' . ($isActive ? 'active' : '') . '">';
+                    echo '<a class="nav-link ' . ($hasChildren ? 'menu-arrow' : '') . ' ' . ($isActive ? 'active' : '') . '" 
                               href="' . ($hasChildren ? "#$collapseId" : $menuUrl) . '" 
-                              ' . ($hasChildren ? 'data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="' . $collapseId . '"' : '') . '>';
+                              ' . ($hasChildren ? 'data-bs-toggle="collapse" role="button" aria-expanded="' . ($isActive ? 'true' : 'false') . '" aria-controls="' . $collapseId . '"' : '') . '>';
                     
                     // Tampilkan ikon hanya jika tersedia
                     if (!empty($menu->icon)) {
@@ -48,7 +60,7 @@
                     echo '</a>';
 
                     if ($hasChildren) {
-                         echo '<div class="collapse" id="' . $collapseId . '">
+                         echo '<div class="collapse ' . ($isActive ? 'show' : '') . '" id="' . $collapseId . '">
                                    <ul class="nav sub-navbar-nav">';
                          renderMenu($menu->children);
                          echo '</ul></div>';
@@ -72,4 +84,52 @@
      @for ($i = 0; $i < 20; $i++)
           <div class="shooting-star"></div>
      @endfor
-</div>
\ No newline at end of file
+</div>
+
+<style>
+     /* Sidebar hover/active contrast improvements */
+     .app-sidebar .nav-link {
+          transition: background-color .2s ease, color .2s ease;
+          border-radius: 6px;
+     }
+
+     /* Hover state (dark green theme) */
+     .app-sidebar .nav-link:hover {
+          background-color: #eaf7f0; /* light green */
+          color: #146c43; /* lighter dark green */
+     }
+
+     /* Active state for parents and leaf items (dark green) */
+     .app-sidebar .nav-item.active > .nav-link,
+     .app-sidebar .nav-link.active {
+          background-color: #198754; /* bootstrap success */
+          color: #ffffff;
+          font-weight: 600;
+     }
+
+     /* Optional: subtle left border indicator on active */
+     .app-sidebar .nav-item.active > .nav-link,
+     .app-sidebar .sub-navbar-nav .nav-link.active {
+          box-shadow: inset 4px 0 0 0 #146c43;
+     }
+
+     /* Submenu links */
+     .app-sidebar .sub-navbar-nav .nav-link:hover {
+          background-color: #f1fbf5;
+          color: #146c43;
+     }
+
+     .app-sidebar .sub-navbar-nav .nav-link.active {
+          background-color: #198754;
+          color: #ffffff;
+          font-weight: 600;
+     }
+
+     /* Keep icon color in sync */
+     .app-sidebar .nav-link:hover .nav-icon iconify-icon,
+     .app-sidebar .nav-item.active > .nav-link .nav-icon iconify-icon,
+     .app-sidebar .nav-link.active .nav-icon iconify-icon,
+     .app-sidebar .sub-navbar-nav .nav-link.active .nav-icon iconify-icon {
+          color: currentColor;
+     }
+</style>
\ No newline at end of file