Fixes sidebar sliding

public_html/static/all.css

@@ -134,3 +134,9 @@
 .sidebar-content {
     width: 250px;
 }
+
+.main-content {
+    transition: width: 0.5s ease;
+}
+.main-content.expanded {
+}

public_html/static/sidebar.js

@@ -0,0 +1,36 @@
+
+document.addEventListener('DOMContentLoaded', function () {
+    var sidebar = document.getElementById('sidebar');
+    var mainContent = document.getElementById('mainContent');
+    var toggleButton = document.getElementById('toggleSidebarButton');
+
+    // update localStorage based on the current state
+    function updateStorage() {
+        var isSidebarCollapsed = sidebar.classList.contains('collapsed');
+        localStorage.setItem('sidebarState', isSidebarCollapsed ? 'collapsed' : 'expanded');
+    }
+
+    // apply saved state
+    function applySavedState() {
+        var savedState = localStorage.getItem('sidebarState');
+        if (savedState === 'collapsed') {
+            sidebar.classList.add('collapsed');
+            mainContent.classList.add('expanded');
+        } else {
+            sidebar.classList.remove('collapsed');
+            mainContent.classList.remove('expanded');
+        }
+    }
+
+    // Initialize
+    applySavedState();
+
+    toggleButton.addEventListener('click', function () {
+        // toggle sidebar and main content
+        sidebar.classList.toggle('collapsed');
+        mainContent.classList.toggle('expanded');
+
+        // Update with the new state
+        updateStorage();
+    });
+});

public_html/templates/page-footer.php

@@ -8,14 +8,7 @@
 
     </div>
 
-<script>
+    <script src="static/sidebar.js"></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>
 
 </html>

public_html/templates/page-menu.php

@@ -2,6 +2,10 @@
         <!-- Menu -->
         <div class="menu-container">
             <ul class="menu-left">
+<button class="btn btn-secondary" 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

@@ -2,9 +2,9 @@
 
             <!-- Sidebar -->
             <div class="col-md-3 sidebar-wrapper bg-light" id="sidebar">
-                <button class="btn btn-secondary" type="button" id="toggleSidebarButton">
+                <!--button class="btn btn-secondary" type="button" id="toggleSidebarButton">
                     sidebar
-                </button>
+                </button-->
                 <div class="sidebar-content card card-body">
                     <ul class="list-group">
                         <li class="list-group-item"><a href="#">stats</a></li>
@@ -16,6 +16,6 @@
 
             <!-- /Sidebar -->
 
-        <div class="col-md-9" id="main-content">
+        <div class="col-md-9 main-content" id="mainContent">
 
             <!-- Main content -->