From 8624a5e7f5b6c9488ea9989f041a75efbf6e996c Mon Sep 17 00:00:00 2001
From: Deepak Khatri <lorforlinux@beagleboard.org>
Date: Tue, 3 Dec 2024 01:37:44 +0530
Subject: [PATCH] Add sidebar collapse buttons
---
_static/css/custom.css | 26 ++++++--
_templates/layout.html | 145 +++++++++++++++++++++++++++--------------
2 files changed, 118 insertions(+), 53 deletions(-)
diff --git a/_static/css/custom.css b/_static/css/custom.css
index b7554ef7..35468a3a 100644
--- a/_static/css/custom.css
+++ b/_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 */
diff --git a/_templates/layout.html b/_templates/layout.html
index ae4769f4..2656622c 100644
--- a/_templates/layout.html
+++ b/_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><</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><</strong>',
+ '<strong>></strong>',
+ 'after'
+ );
+ }
+
+ // Add secondary sidebar toggle button
+ const secondarySidebar = document.getElementById('pst-secondary-sidebar');
+ if (secondarySidebar) {
+ addSidebarToggleButton(
+ secondarySidebar,
+ 'secondary',
+ 'sidebar-toggle-btn',
+ '<strong>></strong>',
+ '<strong><</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>></strong>'; // When collapsed
- } else {
- toggleButton.innerHTML = '<strong><</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>
--
GitLab