Add sidebar toggling JS

DS-100 · Aug 10, 2018 · b076a97 · b076a97
1 parent 1e32167
commit b076a97
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 17 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -58,24 +58,60 @@
   <script src="{{ site.js_url }}/turbolinks.js"></script>
   <script>
     // Run MathJax when Turbolinks navigates to a page
-    document.addEventListener("turbolinks:load", function() {
-      MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
+    document.addEventListener("turbolinks:load", () => {
+      if (window.MathJax)
+        MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
     })
 
+    const togglerId = 'js-sidebar-toggle';
+    const textbookId = 'js-textbook';
+    const togglerActiveClass = 'is-active';
+    const textbookActiveClass = 'js-show-sidebar';
+
+    const getToggler = () => document.getElementById(togglerId);
+    const getTextbook = () => document.getElementById(textbookId);
+
+    /**
+     * Toggles sidebar and menu icon
+     */
+    const toggleSidebar = () => {
+      const toggler = getToggler();
+      const textbook = getTextbook();
+
+      if (textbook.classList.contains(textbookActiveClass)) {
+        textbook.classList.remove(textbookActiveClass);
+        toggler.classList.remove(togglerActiveClass);
+      } else {
+        textbook.classList.add(textbookActiveClass);
+        toggler.classList.add(togglerActiveClass);
+      }
+    }
+
+    /**
+     * Auto-close sidebar on smaller screens after page load.
+     *
+     * Having the sidebar be open by default then closing it on page load for
+     * small screens gives the illusion that the sidebar closes in response
+     * to selecting a page in the sidebar. However, it does cause a bit of jank
+     * on the first page load.
+     *
+     * Since we don't want to persist state in between page navigation, this is
+     * the best we can do while optimizing for larger screens where most
+     * viewers will read the textbook.
+     *
+     * Keep the variable below in sync with the tablet breakpoint value in
+     * _sass/inuitcss/tools/_tools.mq.scss
+     *
+     */
+    const autoCloseSidebarBreakpoint = 740;
+
     // Set up event listener for sidebar toggle button
     document.addEventListener("turbolinks:load", () => {
-      var toggler = document.getElementById('js-sidebar-toggle');
-      toggler.addEventListener('click', () => {
-        var textbook = document.getElementById('js-textbook');
+      getToggler().addEventListener('click', toggleSidebar);
 
-        if (textbook.classList.contains('js-show-sidebar')) {
-          textbook.classList.remove('js-show-sidebar');
-          toggler.classList.remove('is-active')
-        } else {
-          textbook.classList.add('js-show-sidebar');
-          toggler.classList.add('is-active')
-        }
-      });
+      // This assumes that the sidebar is open by default
+      if (window.innerWidth < autoCloseSidebarBreakpoint)
+        toggleSidebar()
     })
   </script>
 </head>
diff --git a/_includes/sidebar-toggle.html b/_includes/sidebar-toggle.html
@@ -1,7 +1,8 @@
 <div class="o-wrapper c-sidebar-toggle">
+  <!-- We show the sidebar by default so we use .is-active -->
   <button
     id="js-sidebar-toggle"
-    class="hamburger hamburger--arrowalt"
+    class="hamburger hamburger--arrowalt is-active"
   >
     <span class="hamburger-box">
       <span class="hamburger-inner"></span>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -2,7 +2,8 @@
 <html lang="en">
   {% include head.html %}
   <body>
-    <div id="js-textbook" class="c-textbook">
+    <!-- Show sidebar by default -->
+    <div id="js-textbook" class="c-textbook js-show-sidebar">
       {% include sidebar.html %}
 
       <main class="c-textbook__page">

diff --git a/_sass/components/_components.textbook__page.scss b/_sass/components/_components.textbook__page.scss
@@ -19,11 +19,13 @@
   padding: $spacing-unit-small 0;
 
   @include mq($from: tablet, $until: desktop) {
-    padding: $spacing-unit;
+    padding-left: $spacing-unit;
+    padding-right: $spacing-unit;
   }
 
   @include mq($from: desktop) {
-    padding: $spacing-unit-large;
+    padding-left: $spacing-unit-large;
+    padding-right: $spacing-unit-large;
   }
 }