chg: [layout:sidebar] Support of active entries

templates/element/layouts/sidebar/entry.php

@@ -3,15 +3,33 @@
     $icon = $parent['icon'] ?? '';
     $label = $parent['label'] ?? '';
     $children = $parent['children'] ?? [];
+    $active = false;
+
     if (!empty($children)) {
         $url = "#{$seed}";
     } else {
         $url = $parent['url'] ?? '#';
     }
+
+    $controller = \Cake\Utility\Inflector::variable($this->request->getParam('controller'));
+    $action = \Cake\Utility\Inflector::variable($this->request->getParam('action'));
+    $currentURL = "/{$controller}/{$action}";
+    if ($url == $currentURL) {
+        $active = true;
+    }
+
+    $hasActiveChild = false;
+    if (!empty($children)) {
+        $flattened = Cake\Utility\Hash::flatten($children);
+        $flattenedValues = array_values($flattened);
+        if (in_array($currentURL, $flattenedValues)) {
+            $hasActiveChild = true;
+        }
+    }
 ?>
 
 <li class="<?= !empty($children) ? 'parent collapsed' : '' ?>">
-    <a class="sidebar-link <?= !empty($children) ? 'collapsed' : '' ?>" href="<?= h($url) ?>" <?= !empty($children) ? 'data-toggle="collapse"' : '' ?>>
+    <a class="sidebar-link <?= !empty($children) ? 'collapsed' : '' ?> <?= $active ? 'active' : '' ?> <?= $hasActiveChild ? 'have-active-child' : '' ?>" href="<?= h($url) ?>" <?= !empty($children) ? 'data-toggle="collapse"' : '' ?> <?= $hasActiveChild ? 'aria-expanded="true"' : '' ?>>
         <i class="sidebar-icon <?= $this->FontAwesome->getClass($icon) ?>"></i>
         <span class="text"><?= h($label) ?></span>
     </a>
@@ -19,6 +37,7 @@
         <?= $this->element('layouts/sidebar/sub-menu', [
                 'seed' => $seed,
                 'children' => $children,
+                'open' => $hasActiveChild
             ]);
         ?>
     <?php endif; ?>

templates/element/layouts/sidebar/sub-menu.php

@@ -2,7 +2,7 @@
     $seed = $seed ?? 'sd-' . mt_rand();
 ?>
 
-<ul id="<?= $seed ?>" class="sub-menu collapse">
+<ul id="<?= $seed ?>" class="sub-menu collapse <?= !empty($open) ? 'show' : '' ?>">
     <?php foreach ($children as $child): ?>
         <?= $this->element('layouts/sidebar/entry', [
                 'parent' => $child,

webroot/css/layout.css

@@ -242,6 +242,19 @@ ul.sidebar-elements li > a.sidebar-link {
     color: unset;
 }
 
+ul.sidebar-elements li > a.sidebar-link.active {
+    background-color: #ebebeb;
+}
+
+.sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child {
+    background-color: #ebebeb;
+}
+
+.sidebar.expanded ul.sidebar-elements li > a.sidebar-link.have-active-child,
+.sidebar:hover ul.sidebar-elements li > a.sidebar-link.have-active-child {
+    background-color: unset;
+}
+
 ul.sidebar-elements > li > a.sidebar-link:hover {
     background-color: #f0f0f0;
 }