Move inline nav JavaScript to nav.js file

Author: reinink

docs/source/_assets/js/nav.js

@@ -3,7 +3,7 @@ $.when($.ready).then(function() {
 
     // Allow opening links in new tabs
     if (event.metaKey) {
-        return
+      return
     }
 
     // Prevent following link
@@ -25,8 +25,8 @@ $.when($.ready).then(function() {
       var nav = $(html).find('#nav').html()
       var content = $(html).find('#content').html()
 
-      $('#sidebar').addClass("hidden");
-      $('.js-close-sidebar').addClass("hidden");
+      $('#sidebar').addClass('hidden')
+      $('#sidebar-close').addClass('hidden')
 
       // Update the page
       $('title').text(title)
@@ -38,21 +38,33 @@ $.when($.ready).then(function() {
 
       // Add page load to brower history
       window.history.pushState({
-        "title": title,
-        "nav": $(html).find('#nav').html(),
-        "content": $(html).find('#content').html()
+        'title': title,
+        'nav': $(html).find('#nav').html(),
+        'content': $(html).find('#content').html()
       }, '', href)
     })
   })
 
   // Load page history (for back/forward nav)
   window.onpopstate = function(e) {
-      if(e.state){
+    if(e.state){
 
-        // Update the page
-        $('title').text(e.state.title)
-        $('#nav').html(e.state.nav)
-        $('#content').html(e.state.content)
-      }
+      // Update the page
+      $('title').text(e.state.title)
+      $('#nav').html(e.state.nav)
+      $('#content').html(e.state.content)
+    }
   }
+
+  // Close sidebar (mobile)
+  $('#sidebar-close').on('click', function () {
+    $('#sidebar').addClass('hidden')
+    $('#sidebar-close').addClass('hidden')
+  })
+
+  // Show sidebar (mobile)
+  $('#sidebar-open').on('click', function () {
+      $('#sidebar').removeClass('hidden')
+      $('#sidebar-close').removeClass('hidden')
+  })
 })

docs/source/_layouts/documentation.blade.php

@@ -159,15 +159,15 @@
     <div class="md:ml-80">
         <div class="fixed w-full z-20">
             <div class="pin-t bg-white md:hidden relative border-b border-grey-light h-12 flex items-center">
-                  <div class="js-open-sidebar absolute pin-l pin-y px-4 flex items-center">
+                  <div id="sidebar-open" class="absolute pin-l pin-y px-4 flex items-center">
                       <svg class="h-4 cursor-pointer text-grey" role="button" fill="#777" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
                   </div>
-                  <div class="mx-auto inline-flex items-center">
+                  <a href="/" class="mx-auto inline-flex items-center">
                       <svg class="h-4" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg">
                           <path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#logoGradient)" fill-rule="evenodd"></path>
                       </svg>
-                  </div>
-                  <div class="hidden js-close-sidebar">
+                  </a>
+                  <div id="sidebar-close" class="hidden">
                     <div class="flex items-center absolute pin-r pin-y px-4">
                       <svg class="h-4 cursor-pointer text-grey" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>
                     </div>
@@ -184,21 +184,6 @@
                 </div>
             </div>
             <script src="/js/app.js"></script>
-            <script>
-                var closeSidebar = function () {
-                    $('#sidebar').addClass("hidden");
-                    $('.js-close-sidebar').addClass("hidden");
-                }
-
-                $('.js-close-sidebar').on('click', function () {
-                  closeSidebar();
-                });
-
-                $('.js-open-sidebar').on('click', function () {
-                    $('#sidebar').removeClass("hidden");
-                    $('.js-close-sidebar').removeClass("hidden");
-                });
-            </script>
         </div>
     </div>
 </div>