Add sidebar collapse buttons

_static/css/custom.css

@@ -93,15 +93,26 @@ figure a.headerlink {
 }
 
 /* Primary sidebar toggle button */
-/* Sidebar styles */
+#pst-primary-sidebar.collapsed {
+    overflow: hidden;
+    padding: 0;
+    width: 0; /* Collapse the sidebar */
+    transition: width 0.4s ease;
+}
 #pst-primary-sidebar {
-    transition: width 0.3s ease; /* Smooth collapse/expand transition */
+    transition: width 0.4s ease;
 }
 
-#pst-primary-sidebar.collapsed {
+#pst-secondary-sidebar.collapsed {
     overflow: hidden;
     padding: 0;
     width: 0; /* Collapse the sidebar */
+    transition: width 0.4s ease;
+}
+
+#pst-secondary-sidebar {
+    padding-left: 0px;
+    transition: width 0.4s ease;
 }
 
 /* Toggle button styles */
@@ -112,7 +123,6 @@ figure a.headerlink {
     color: white; /* Text color */
     border: none; /* Remove border */
     cursor: pointer; /* Pointer cursor on hover */
-    border-radius: 0 5px 5px 0; /* Rounded corners */
     display: block; /* Ensure the button is block-level */
     font-size: 20px; /* Adjust font size */
     font-weight: bold; /* Bold text */
@@ -121,6 +131,14 @@ figure a.headerlink {
     line-height: 20px; /* Vertically center the text */
 }
 
+#toggle-primary-sidebar.sidebar-toggle-btn{
+    border-radius: 0 5px 5px 0; /* Rounded corners */
+}
+
+#toggle-secondary-sidebar.sidebar-toggle-btn{
+    border-radius: 5px 0 0 5px; /* Rounded corners */
+}
+
 /* Optional: Adding a hover effect */
 .sidebar-toggle-btn:hover {
     background-color: #C7480D; /* Slightly darker blue on hover */

_templates/layout.html

@@ -53,64 +53,111 @@
 <script>
 
 document.addEventListener('DOMContentLoaded', () => {
-    // Select the sidebar and create the custom toggle button
-    const sidebar = document.getElementById('pst-primary-sidebar');
-    const toggleButton = document.createElement('button');
-    toggleButton.id = 'toggle-primary-sidebar';
-    toggleButton.innerHTML = '<strong>&lt;</strong>'; // Initial content
-    toggleButton.className = 'sidebar-toggle-btn'; // Add class for styling
-
-    // Insert the button after the sidebar
-    sidebar.parentNode.insertBefore(toggleButton, sidebar.nextSibling);
-
-    // Function to check visibility of the primary sidebar toggle button
-    function checkPrimaryToggleVisibility() {
-        const primaryToggleButton = document.querySelector('.pst-navbar-icon.sidebar-toggle.primary-toggle');
-        
-        // If the primary toggle button is visible, hide the custom toggle button
-        if (primaryToggleButton && primaryToggleButton.offsetParent !== null) {
-            toggleButton.style.display = 'none'; // Hide custom button
-        } else {
-            toggleButton.style.display = 'block'; // Show custom button
-        }
+    // Add primary sidebar toggle button
+    const primarySidebar = document.getElementById('pst-primary-sidebar');
+    if (primarySidebar) {
+        addSidebarToggleButton(
+            primarySidebar,
+            'primary',
+            'sidebar-toggle-btn',
+            '<strong>&lt;</strong>',
+            '<strong>&gt;</strong>',
+            'after'
+        );
+    }
+
+    // Add secondary sidebar toggle button
+    const secondarySidebar = document.getElementById('pst-secondary-sidebar');
+    if (secondarySidebar) {
+        addSidebarToggleButton(
+            secondarySidebar,
+            'secondary',
+            'sidebar-toggle-btn',
+            '<strong>&gt;</strong>',
+            '<strong>&lt;</strong>',
+            'before'
+        );
     }
 
-    // Function to update the button visibility based on the sidebar state
-    function updateButtonVisibility() {
-        // Check if the sidebar is hidden via display: none
-        if (sidebar && window.getComputedStyle(sidebar).display === 'none') {
-            // If the sidebar is hidden, remove the button from the DOM
-            if (toggleButton) {
-                toggleButton.remove();
+    /**
+     * Adds a toggle button for a sidebar with visibility and state management.
+     * @param {HTMLElement} sidebar - The sidebar element to toggle.
+     * @param {string} key - A unique key for localStorage and button id.
+     * @param {string} buttonClass - CSS class for the toggle button.
+     * @param {string} collapseHTML - HTML for the button when the sidebar is collapsed.
+     * @param {string} expandHTML - HTML for the button when the sidebar is expanded.
+     * @param {string} position - Position to insert the button ('before' or 'after').
+     */
+    function addSidebarToggleButton(sidebar, key, buttonClass, collapseHTML, expandHTML, position) {
+        const toggleButton = document.createElement('button');
+        toggleButton.id = `toggle-${key}-sidebar`;
+        toggleButton.innerHTML = sidebar.classList.contains('collapsed') ? expandHTML : collapseHTML;
+        toggleButton.className = buttonClass;
+
+        // Insert the toggle button
+        if (position === 'before') {
+            sidebar.parentNode.insertBefore(toggleButton, sidebar);
+        } else if (position === 'after') {
+            sidebar.parentNode.insertBefore(toggleButton, sidebar.nextSibling);
+        }
+
+        // Restore collapsed state from localStorage
+        const collapsedState = localStorage.getItem(`${key}SidebarCollapsed`) === 'true';
+        if (collapsedState) {
+            sidebar.classList.add('collapsed');
+            toggleButton.innerHTML = expandHTML;
+        }
+
+        // Handle toggle button click
+        toggleButton.addEventListener('click', () => {
+            sidebar.classList.toggle('collapsed');
+
+            // Update button content and save state
+            if (sidebar.classList.contains('collapsed')) {
+                toggleButton.innerHTML = expandHTML;
+                localStorage.setItem(`${key}SidebarCollapsed`, 'true');
+            } else {
+                toggleButton.innerHTML = collapseHTML;
+                localStorage.setItem(`${key}SidebarCollapsed`, 'false');
             }
-        } else {
-            // Ensure the button is added back if it was removed
-            if (!document.querySelector('#toggle-primary-sidebar')) {
-                sidebar.parentNode.insertBefore(toggleButton, sidebar.nextSibling);
+        });
+
+        // Check visibility of the toggle button
+        function checkToggleVisibility() {
+            const existingToggleButton = document.querySelector(
+                `.pst-navbar-icon.sidebar-toggle.${key}-toggle`
+            );
+            if (existingToggleButton && existingToggleButton.offsetParent !== null) {
+                toggleButton.style.display = 'none'; // Hide custom toggle button
+            } else {
+                toggleButton.style.display = 'block'; // Show custom toggle button
             }
         }
-    }
-    // Initially check visibility of the primary toggle button
-    checkPrimaryToggleVisibility();
-    updateButtonVisibility();
 
-    // Toggle sidebar collapse/expand functionality
-    toggleButton.addEventListener('click', () => {
-        sidebar.classList.toggle('collapsed');
-        
-        // Update button content based on sidebar state
-        if (sidebar.classList.contains('collapsed')) {
-            toggleButton.innerHTML = '<strong>&gt;</strong>'; // When collapsed
-        } else {
-            toggleButton.innerHTML = '<strong>&lt;</strong>'; // When expanded
+        // Update button visibility if the sidebar is removed
+        function updateButtonVisibility() {
+            if (window.getComputedStyle(sidebar).display === 'none') {
+                toggleButton.remove(); // Remove button if sidebar is hidden
+            } else if (!document.querySelector(`#toggle-${key}-sidebar`)) {
+                // Re-add the button if missing
+                if (position === 'before') {
+                    sidebar.parentNode.insertBefore(toggleButton, sidebar);
+                } else if (position === 'after') {
+                    sidebar.parentNode.insertBefore(toggleButton, sidebar.nextSibling);
+                }
+            }
         }
-    });
 
-    // Monitor window resize to dynamically show/hide the button
-    window.addEventListener('resize', () => {
-        checkPrimaryToggleVisibility();
+        // Initial visibility check
+        checkToggleVisibility();
         updateButtonVisibility();
-    });
+
+        // Monitor window resize for dynamic button visibility updates
+        window.addEventListener('resize', () => {
+            checkToggleVisibility();
+            updateButtonVisibility();
+        });
+    }
 });
 
 </script>