Refine desktop sidebar collapse styling

components/sidebar.html

@@ -3,10 +3,7 @@
   helper classes after the initial animation to avoid flashes each time we
   re-render navigation links.
 -->
-<aside
-  id="sidebar"
-  class="bg-gray-900 text-white transition-transform duration-300 ease-in-out fixed top-0 left-0 w-64 h-screen overflow-y-auto fade-in fade-in-delay-100"
->
+<aside id="sidebar" class="fade-in fade-in-delay-100">
   <div class="flex flex-col h-full">
     <!-- Top Navigation Links -->
     <div class="flex-1 overflow-y-auto px-4">

css/style.css

@@ -23,6 +23,7 @@
   --z-modal-player: 120;
   --sidebar-width-expanded: 16rem;
   --sidebar-width-collapsed: 4rem;
+  --sidebar-width: var(--sidebar-width-expanded);
 }
 
 html {
@@ -68,7 +69,6 @@ body {
   margin: 0;
   padding: 0;
   overflow-x: hidden; /* Disable horizontal scrolling */
-  --sidebar-width: var(--sidebar-width-expanded);
 }
 
 header {
@@ -1455,13 +1455,14 @@ footer a:hover {
   position: fixed;
   top: 0;
   left: 0;
-  width: 16rem; /* Tailwind's w-64 */
+  width: var(--sidebar-width);
   height: 100vh;
   height: 100dvh;
   background-color: #0f172a;
+  color: var(--color-text);
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  transition: width 200ms ease, transform 0.3s ease, box-shadow 0.3s ease;
   /* Keep below modal stacks so dialogs overlay the drawer. */
   z-index: var(--z-sidebar);
   box-shadow: none;
@@ -1494,7 +1495,7 @@ body.sidebar-open #sidebarOverlay {
 @media (max-width: 767px) {
   #sidebar {
     transform: translate3d(-100%, 0, 0);
-    width: min(16rem, calc(100vw - 3rem));
+    width: min(var(--sidebar-width-expanded), calc(100vw - 3rem));
   }
   /* When the sidebar-open class is added, slide the sidebar in */
   #sidebar.sidebar-open {
@@ -1512,7 +1513,6 @@ body.sidebar-open #sidebarOverlay {
     transform: translateX(0) !important;
     width: var(--sidebar-width);
     overflow-x: hidden;
-    transition: width 200ms ease, transform 0.3s ease, box-shadow 0.3s ease;
   }
 
   #sidebar.sidebar-open {

index.html

@@ -50,7 +50,7 @@
     <link href="css/style.css" rel="stylesheet" />
     <link href="css/markdown.css" rel="stylesheet" />
   </head>
-  <body class="bg-gray-100">
+  <body>
     <!--
       SIDEBAR CONTAINER:
       The <aside id="sidebar"> inside handles visibility.

js/index.js

@@ -174,6 +174,7 @@ async function bootstrapInterface() {
     console.warn("Sidebar collapse toggle not found; skipping density controls.");
   }
   const collapseLabel = collapseToggle?.querySelector(".sidebar-toggle-label");
+  const appContainer = document.getElementById("app");
 
   const mobileMenuBtn = document.getElementById("mobileMenuBtn");
   const sidebarOverlay = document.getElementById("sidebarOverlay");
@@ -204,21 +205,29 @@ async function bootstrapInterface() {
   };
 
   const applySidebarDensity = (collapsed) => {
-    const targets = [sidebar, document.body].filter(
-      (element) => element instanceof HTMLElement,
-    );
+    const widthTargets = [
+      document.documentElement,
+      document.body,
+      sidebar,
+      appContainer,
+    ].filter((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);
+    widthTargets.forEach((element) => {
       element.style.setProperty("--sidebar-width", nextWidth);
     });
 
+    [sidebar, document.body]
+      .filter((element) => element instanceof HTMLElement)
+      .forEach((element) => {
+        element.classList.toggle("sidebar-collapsed", collapsed);
+        element.classList.toggle("sidebar-expanded", !collapsed);
+        element.setAttribute("data-state", state);
+      });
+
     if (collapseToggle) {
       collapseToggle.setAttribute("aria-expanded", collapsed ? "false" : "true");
       collapseToggle.setAttribute("data-state", state);