Improve desktop sidebar collapse behavior

components/sidebar.html

@@ -23,7 +23,8 @@
             <span class="sidebar-toggle-label">Collapse</span>
             <svg
               data-sidebar-chevron
-              class="w-4 h-4 transform transition-transform duration-300"
+              class="w-4 h-4 transform transition-transform duration-300 sidebar-toggle-icon--rotated"
+              aria-hidden="true"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 24 24"
               fill="none"

css/style.css

@@ -21,6 +21,8 @@
   --z-modal-overlay: 70;
   --z-modal-content: 90;
   --z-modal-player: 120;
+  --sidebar-width-expanded: 16rem;
+  --sidebar-width-collapsed: 4rem;
 }
 
 html {
@@ -66,6 +68,7 @@ body {
   margin: 0;
   padding: 0;
   overflow-x: hidden; /* Disable horizontal scrolling */
+  --sidebar-width: var(--sidebar-width-expanded);
 }
 
 header {
@@ -1507,7 +1510,7 @@ body.sidebar-open #sidebarOverlay {
 @media (min-width: 768px) {
   #sidebar {
     transform: translateX(0) !important;
-    width: 16rem;
+    width: var(--sidebar-width);
     overflow-x: hidden;
     transition: width 200ms ease, transform 0.3s ease, box-shadow 0.3s ease;
   }
@@ -1520,14 +1523,19 @@ body.sidebar-open #sidebarOverlay {
     display: none;
   }
 
-  body.sidebar-collapsed #sidebar,
-  #sidebar.sidebar-collapsed {
-    width: 4rem;
+  #app {
+    margin-left: var(--sidebar-width);
+    transition: margin-left 200ms ease;
   }
 
-  body.sidebar-expanded #sidebar,
+  body.sidebar-collapsed,
+  #sidebar.sidebar-collapsed {
+    --sidebar-width: var(--sidebar-width-collapsed);
+  }
+
+  body.sidebar-expanded,
   #sidebar.sidebar-expanded {
-    width: 16rem;
+    --sidebar-width: var(--sidebar-width-expanded);
   }
 
   body.sidebar-collapsed #sidebar a,
@@ -1569,23 +1577,15 @@ body.sidebar-open #sidebarOverlay {
     display: inline;
   }
 
+  #sidebar .sidebar-toggle-icon--rotated {
+    transform: rotate(180deg);
+  }
+
   body.sidebar-collapsed #sidebar .sidebar-toggle-icon--rotated,
   #sidebar.sidebar-collapsed .sidebar-toggle-icon--rotated {
     transform: rotate(0deg);
   }
 
-  body.sidebar-expanded #sidebar .sidebar-toggle-icon--rotated,
-  #sidebar.sidebar-expanded .sidebar-toggle-icon--rotated {
-    transform: rotate(180deg);
-  }
-
-  body.sidebar-collapsed #app {
-    margin-left: 4rem !important;
-  }
-
-  body.sidebar-expanded #app {
-    margin-left: 16rem !important;
-  }
 }
 
 /* Example: customizing the border & background in the sidebar */

index.html

@@ -64,8 +64,9 @@
 
     <!--
       MAIN CONTENT:
-      md:ml-64 ensures content is shifted on desktop so the pinned sidebar doesn't overlap.
-      On mobile we float the sidebar over the content and dim the background overlay.
+      Desktop spacing now follows the --sidebar-width custom property so the layout stays in
+      sync with the collapsible rail. On mobile we float the sidebar over the content and dim
+      the background overlay.
     -->
     <!--
       `fade-in` is scrubbed by js/index.js after the first animation so that
@@ -73,7 +74,7 @@
       elements that should animate exactly once on initial paint.
     -->
 
-    <div id="app" class="md:ml-64 px-4 py-8 min-h-screen flex flex-col fade-in">
+    <div id="app" class="px-4 py-8 min-h-screen flex flex-col fade-in">
       <!-- Header -->
       <header class="mb-8 flex items-center w-full">
         <!-- Mobile hamburger button (hidden on md+) -->

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) {