From 8981f1cb6aab80f4c6c5b96fca2324bb8568add6 Mon Sep 17 00:00:00 2001 From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com> Date: Mon, 6 Oct 2025 14:14:44 -0400 Subject: [PATCH 01/12] Improve desktop sidebar collapse behavior --- components/sidebar.html | 3 ++- css/style.css | 36 ++++++++++++++++++------------------ index.html | 7 ++++--- js/index.js | 15 ++++++++++----- 4 files changed, 34 insertions(+), 27 deletions(-) diff --git a/components/sidebar.html b/components/sidebar.html index e951015f..9fd73592 100644 --- a/components/sidebar.html +++ b/components/sidebar.html @@ -23,7 +23,8 @@ Collapse
+
diff --git a/js/index.js b/js/index.js index 63b1af49..6610a047 100644 --- a/js/index.js +++ b/js/index.js @@ -173,13 +173,14 @@ async function bootstrapInterface() { if (!collapseToggle) { console.warn("Sidebar collapse toggle not found; skipping density controls."); } - const collapseChevron = collapseToggle?.querySelector("[data-sidebar-chevron]"); const collapseLabel = collapseToggle?.querySelector(".sidebar-toggle-label"); const mobileMenuBtn = document.getElementById("mobileMenuBtn"); const sidebarOverlay = document.getElementById("sidebarOverlay"); const SIDEBAR_COLLAPSED_STORAGE_KEY = "sidebarCollapsed"; + const SIDEBAR_WIDTH_EXPANDED = "16rem"; + const SIDEBAR_WIDTH_COLLAPSED = "4rem"; let isSidebarCollapsed = false; const readStoredSidebarCollapsed = () => { @@ -207,20 +208,24 @@ async function bootstrapInterface() { (element) => element instanceof HTMLElement, ); const state = collapsed ? "collapsed" : "expanded"; + const nextWidth = collapsed + ? SIDEBAR_WIDTH_COLLAPSED + : SIDEBAR_WIDTH_EXPANDED; targets.forEach((element) => { element.classList.toggle("sidebar-collapsed", collapsed); element.classList.toggle("sidebar-expanded", !collapsed); element.setAttribute("data-state", state); + element.style.setProperty("--sidebar-width", nextWidth); }); if (collapseToggle) { collapseToggle.setAttribute("aria-expanded", collapsed ? "false" : "true"); collapseToggle.setAttribute("data-state", state); - } - - if (collapseChevron instanceof HTMLElement) { - collapseChevron.classList.toggle("rotate-180", collapsed); + collapseToggle.setAttribute( + "aria-label", + collapsed ? "Expand sidebar" : "Collapse sidebar", + ); } if (collapseLabel) { From 9a9dcb239fb17213d6c0bc387701ff73537a3f79 Mon Sep 17 00:00:00 2001 From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com> Date: Mon, 6 Oct 2025 14:42:41 -0400 Subject: [PATCH 02/12] Refine desktop sidebar collapse styling --- components/sidebar.html | 5 +---- css/style.css | 10 +++++----- index.html | 2 +- js/index.js | 23 ++++++++++++++++------- 4 files changed, 23 insertions(+), 17 deletions(-) diff --git a/components/sidebar.html b/components/sidebar.html index 9fd73592..40997020 100644 --- a/components/sidebar.html +++ b/components/sidebar.html @@ -3,10 +3,7 @@ helper classes after the initial animation to avoid flashes each time we re-render navigation links. --> -