Only apply sidebar behaviors upon width changes

quarto-dev · Nov 2, 2023 · 17b80c6 · 17b80c6
1 parent 52257f9
commit 17b80c6
Showing 1 changed file with 15 additions and 10 deletions.
diff --git a/src/resources/formats/dashboard/quarto-dashboard.js b/src/resources/formats/dashboard/quarto-dashboard.js
@@ -69,20 +69,25 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
   const sidebar = window.document.querySelector(
     ".quarto-dashboard-content .bslib-sidebar-layout"
   );
+  let prevWidth = window.document.body.clientWidth;
   const sidebarCollapseClass = "sidebar-collapsed";
   if (sidebar) {
     const resizeObserver = new ResizeObserver(
-      throttle(function () {
-        if (window.document.body.clientWidth <= 576) {
-          // Hide the sidebar
-          if (!sidebar.classList.contains(sidebarCollapseClass)) {
-            sidebar.classList.add(sidebarCollapseClass);
-          }
-        } else {
-          // Show the sidebar
-          if (sidebar.classList.contains(sidebarCollapseClass)) {
-            sidebar.classList.remove(sidebarCollapseClass);
+      throttle(function (e) {
+        const clientWidth = window.document.body.clientWidth;
+        if (prevWidth !== clientWidth) {
+          if (clientWidth <= 576) {
+            // Hide the sidebar
+            if (!sidebar.classList.contains(sidebarCollapseClass)) {
+              sidebar.classList.add(sidebarCollapseClass);
+            }
+          } else {
+            // Show the sidebar
+            if (sidebar.classList.contains(sidebarCollapseClass)) {
+              sidebar.classList.remove(sidebarCollapseClass);
+            }
           }
+          prevWidth = clientWidth;
         }
       }, 5)
     );