Fix sidebar animation and other behavior

ehuss · ehuss · commit c842b5d06e43 · 2025-07-14T14:24:32.000-07:00
This fixes several issues with how the sidebar was behaving: - Manually resizing the sidebar was incorrectly applying transition animations to the page-wrapper causing awkward movement. - Clicking the sidebar toggle caused the menu bar to behave differently compared to loading a page with the sidebar visible or hidden. - page-wrapper animation wasn't working when JS was disabled. - RTL sidebar animation was broken. Most of these issues stem from #2454 which moved `js` and `sidebar-visible` classes from `<body>` to `<html>`, but failed to update some of the JS and CSS code that was still assuming it was on the body. #1641 previously moved `js` from `<html>` to `<body>` with the reasoning "This will be necessary for using CSS selectors on root attributes.". However, I don't see how that is absolutely necessary, since selectors like `[dir=rtl].js` should work to select the root element.
diff --git a/src/front-end/css/general.css b/src/front-end/css/general.css
@@ -86,11 +86,12 @@ h6:target::before {
     box-sizing: border-box;
     background-color: var(--bg);
 }
-.no-js .page-wrapper,
+html:not(.js) .page-wrapper,
 .js:not(.sidebar-resizing) .page-wrapper {
     transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */
 }
-[dir=rtl] .js:not(.sidebar-resizing) .page-wrapper {
+[dir=rtl]:not(.js) .page-wrapper,
+[dir=rtl].js:not(.sidebar-resizing) .page-wrapper {
     transition: margin-right 0.3s ease, transform 0.3s ease; /* Animation: slide away */
 }
 
diff --git a/src/front-end/js/book.js b/src/front-end/js/book.js
@@ -515,7 +515,6 @@ aria-label="Show hidden lines"></button>';
 })();
 
 (function sidebar() {
-    const body = document.querySelector('body');
     const sidebar = document.getElementById('sidebar');
     const sidebarLinks = document.querySelectorAll('#sidebar a');
     const sidebarToggleButton = document.getElementById('sidebar-toggle');
@@ -548,7 +547,7 @@ aria-label="Show hidden lines"></button>';
     });
 
     function showSidebar() {
-        body.classList.add('sidebar-visible');
+        document.documentElement.classList.add('sidebar-visible');
         Array.from(sidebarLinks).forEach(function(link) {
             link.setAttribute('tabIndex', 0);
         });
@@ -562,7 +561,7 @@ aria-label="Show hidden lines"></button>';
     }
 
     function hideSidebar() {
-        body.classList.remove('sidebar-visible');
+        document.documentElement.classList.remove('sidebar-visible');
         Array.from(sidebarLinks).forEach(function(link) {
             link.setAttribute('tabIndex', -1);
         });
@@ -594,14 +593,14 @@ aria-label="Show hidden lines"></button>';
     function initResize() {
         window.addEventListener('mousemove', resize, false);
         window.addEventListener('mouseup', stopResize, false);
-        body.classList.add('sidebar-resizing');
+        document.documentElement.classList.add('sidebar-resizing');
     }
     function resize(e) {
         let pos = e.clientX - sidebar.offsetLeft;
         if (pos < 20) {
             hideSidebar();
         } else {
-            if (!body.classList.contains('sidebar-visible')) {
+            if (!document.documentElement.classList.contains('sidebar-visible')) {
                 showSidebar();
             }
             pos = Math.min(pos, window.innerWidth - 100);
@@ -610,7 +609,7 @@ aria-label="Show hidden lines"></button>';
     }
     //on mouseup remove windows functions mousemove & mouseup
     function stopResize() {
-        body.classList.remove('sidebar-resizing');
+        document.documentElement.classList.remove('sidebar-resizing');
         window.removeEventListener('mousemove', resize, false);
         window.removeEventListener('mouseup', stopResize, false);
     }

Original file line number	Diff line number	Diff line change
`@@ -86,11 +86,12 @@ h6:target::before {`
`86`	`86`	`box-sizing: border-box;`
`87`	`87`	`background-color: var(--bg);`
`88`	`88`	`}`
`89`		`-.no-js .page-wrapper,`
	`89`	`+html:not(.js) .page-wrapper,`
`90`	`90`	`.js:not(.sidebar-resizing) .page-wrapper {`
`91`	`91`	`transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */`
`92`	`92`	`}`
`93`		`-[dir=rtl] .js:not(.sidebar-resizing) .page-wrapper {`
	`93`	`+[dir=rtl]:not(.js) .page-wrapper,`
	`94`	`+[dir=rtl].js:not(.sidebar-resizing) .page-wrapper {`
`94`	`95`	`transition: margin-right 0.3s ease, transform 0.3s ease; /* Animation: slide away */`
`95`	`96`	`}`
`96`	`97`