Fixes sidebar sliding

public_html/static/all.css

@@ -121,15 +121,16 @@
     border: 1px solid gray;
 }
 
+
+/* collapsing sidebar */
 .sidebar-wrapper {
-    width: 250px; /* Default width of the sidebar */
+    width: 250px;
-    transition: width 0.3s; /* Smooth transition for collapsing */
+    transition: width 0.5s ease;
-    overflow-x: hidden; /* Hide horizontal scrollbar */
+    overflow-x: hidden;
 }
 .sidebar-wrapper.collapsed {
-    width: 0; /* Collapsed width */
+    width: 2em;
 }
 .sidebar-content {
-    width: 250px; /* Keep content width for centering */
+    width: 250px;
 }
-

public_html/templates/page-footer.php

@@ -9,9 +9,11 @@
     </div>
 
 <script>
+    // slide the sidebar to the left instead of default up
     document.getElementById('toggleSidebarButton').addEventListener('click', function () {
         document.getElementById('sidebar').classList.toggle('collapsed');
     });
+
 </script>
 
 </body>

public_html/templates/page-menu.php

@@ -5,7 +5,6 @@
                 <button class="btn btn-primary mb-3" type="button" id="toggleSidebarButton">
                     sidebar
                 </button>
-
                 <li><a href="index.php">home</a></li>
 <?php if ( isset($_SESSION['username']) ) { ?>
                 <li><a href="?page=config">config</a></li>

public_html/templates/page-sidebar.php

@@ -13,6 +13,6 @@
 
             <!-- /Sidebar -->
 
-        <div class="col-md-9">
+        <div class="col-md-9" id="main-content">
 
             <!-- Main content -->