arifal/sibedas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix collapse sidebar when active

Browse Source
This commit is contained in:
arifal
2025-09-12 13:06:22 +07:00
parent e265e2ec35
commit 1a24b18719
1 changed files with 66 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
resources/views/layouts/partials/sidebar.blade.php
View File

@@ -17,10 +17,22 @@
<li class="menu-title">Menu</li> <li class="menu-title">Menu</li>
@php @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) { function renderMenu($menus) {
$currentMenuId = request('menu_id');
foreach ($menus as $menu) { foreach ($menus as $menu) {
$collapseId = "sidebar-" . $menu->id; $collapseId = "sidebar-" . $menu->id;
$hasChildren = $menu->children->count() > 0; $hasChildren = $menu->children->count() > 0;
$isActive = isActiveMenu($menu, $currentMenuId);
// Pastikan route tersedia dan boleh ditampilkan // Pastikan route tersedia dan boleh ditampilkan
$menuUrl = '#'; $menuUrl = '#';
@@ -28,14 +40,14 @@
if (Route::has($menu->url)) { if (Route::has($menu->url)) {
$menuUrl = route($menu->url, ['menu_id' => $menu->id]); $menuUrl = route($menu->url, ['menu_id' => $menu->id]);
} else { } 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 '<li class="nav-item ' . ($hasChildren ? 'has-children' : '') . ' ' . ($isActive ? 'active' : '') . '">';
echo '<a class="nav-link ' . ($hasChildren ? 'menu-arrow' : '') . '" echo '<a class="nav-link ' . ($hasChildren ? 'menu-arrow' : '') . ' ' . ($isActive ? 'active' : '') . '"
href="' . ($hasChildren ? "#$collapseId" : $menuUrl) . '" 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 // Tampilkan ikon hanya jika tersedia
if (!empty($menu->icon)) { if (!empty($menu->icon)) {
@@ -48,7 +60,7 @@
echo '</a>'; echo '</a>';
if ($hasChildren) { if ($hasChildren) {
echo '<div class="collapse" id="' . $collapseId . '"> echo '<div class="collapse ' . ($isActive ? 'show' : '') . '" id="' . $collapseId . '">
<ul class="nav sub-navbar-nav">'; <ul class="nav sub-navbar-nav">';
renderMenu($menu->children); renderMenu($menu->children);
echo '</ul></div>'; echo '</ul></div>';
@@ -73,3 +85,51 @@
<div class="shooting-star"></div> <div class="shooting-star"></div>
@endfor @endfor
</div> </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>