chg: [layout:sidebar] Lock/unlock sidebar

templates/element/layouts/sidebar.php

@@ -1,4 +1,4 @@
-<div class="sidebar-wrapper">
+<div class="sidebar-wrapper d-flex flex-column">
     <div class="sidebar-scroll">
         <div class="sidebar-content">
             <ul class="sidebar-elements">
@@ -14,4 +14,9 @@
             </ul>
         </div>
     </div>
+    <span class="lock-sidebar align-self-center mt-auto w-100" onclick="$('.sidebar').toggleClass('expanded')">
+        <a type="button" class="btn btn-<?= empty($darkMode) ? 'light' : 'dark' ?> btn-sm w-100">
+            <!-- <i class="<?= $this->FontAwesome->getClass('angle-double-right') ?>"></i> -->
+        </a>
+    </span>
 </div>

templates/element/layouts/sidebar/entry.php

@@ -3,23 +3,6 @@
     $icon = $parent['icon'] ?? '';
     $label = $parent['label'] ?? '';
     $children = $parent['children'] ?? [];
-    if ($label == 'List organisations') {
-        $children = [
-            [
-                'label' => 'level 1',
-                'children' => [
-                    'Level 2' => [
-                        'label' => 'level 2',
-                        'children' => [
-                            'Level 3' => [
-                                'label' => 'level 3',
-                            ]
-                        ]
-                    ]
-                ]
-            ]
-        ];
-    }
     if (!empty($children)) {
         $url = "#{$seed}";
     } else {
@@ -27,9 +10,8 @@
     }
 ?>
 
-<?php if (empty($parent['skipTopMenu'])): ?>
 <li class="<?= !empty($children) ? 'parent collapsed' : '' ?>">
-    <a class="sidebar-link <?= !empty($children) ? 'collapsed' : '' ?>" href="<?= h($url) ?>" data-toggle="collapse">
+    <a class="sidebar-link <?= !empty($children) ? 'collapsed' : '' ?>" href="<?= h($url) ?>" <?= !empty($children) ? 'data-toggle="collapse"' : '' ?>>
         <i class="sidebar-icon <?= $this->FontAwesome->getClass($icon) ?>"></i>
         <span class="text"><?= h($label) ?></span>
     </a>
@@ -40,5 +22,4 @@
             ]);
         ?>
     <?php endif; ?>
-</li>
-<?php endif; ?>
+</li>

webroot/css/layout.css

@@ -25,7 +25,7 @@ body {
     margin-bottom: 0;
 }
 
-.content {
+main.content {
     position: relative;
     left: 0;
     margin-left: var(--sidebar-width-collapsed);
@@ -34,8 +34,8 @@ body {
 }
 
 .sidebar {
-    height: 100%;
     margin-top: var(--navbar-height);
+    overflow: hidden;
     position: fixed;
     top: 0;
     bottom: 0;
@@ -50,6 +50,10 @@ body {
     width: var(--sidebar-width-expanded);
 }
 
+.sidebar.expanded ~ main.content {
+    margin-left: var(--sidebar-width-expanded);
+}
+
 .left-navbar {
     min-width: 70px;
 }
@@ -67,6 +71,8 @@ body {
     padding-right: 20px;
 }
 
+
+
 /* sidebar */
 .sidebar-wrapper {
     width: 100%;
@@ -75,17 +81,10 @@ body {
 
 .sidebar-scroll {
     position: relative;
-    height: 100%;
     width: 100%;
-    overflow: hidden;
 }
 
 .sidebar-content {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
     padding-top: 10px;
 }
 
@@ -94,6 +93,16 @@ ul.sidebar-elements {
     padding: 0;
 }
 
+.sidebar .lock-sidebar > a::before {
+    content: "\f101";
+    font-family: 'Font Awesome 5 Free';
+    font-weight: 900;
+}
+
+.sidebar.expanded .lock-sidebar > a::before {
+    content: "\f100";
+}
+
 /* sidebar entry */
 ul.sidebar-elements > li {
     list-style: none;