Merge pull request #6 from stackabletech/mobile-nav-css-only

Enable navigation on mobile devices

Author: siegfriedweber

src/css/header.css

@@ -267,8 +267,34 @@ body {
     display: none;
   }
 
+  .navbar-sub:not(.is-active) {
+    max-height: 0;
+    padding: 0;
+  }
+
   .navbar-sub {
-    display: none;
+    position: fixed;
+    top: var(--navbar-height);
+    width: 100%;
+    height: auto;
+    max-height: calc(100vh - var(--navbar-height));
+    overflow-y: scroll;
+    z-index: 4;
+    transition: max-height 0.2s ease, padding 0.2s ease;
+  }
+
+  .navbar-sub .container {
+    flex-direction: column;
+  }
+
+  .navbar-sub .drop-down-content {
+    display: inherit;
+    position: inherit;
+    top: inherit;
+    left: inherit;
+    padding-top: 7px;
+    padding-bottom: 0;
+    box-shadow: inherit;
   }
 
   .navbar-brand .navbar-item {

src/js/01-nav.js

@@ -4,6 +4,7 @@
   var SECT_CLASS_RX = /^sect(\d)$/
 
   var navContainer = document.querySelector('.nav-container')
+  if (!navContainer) return
   var navToggle = document.querySelector('.nav-toggle')
 
   navToggle.addEventListener('click', showNav)

src/js/05-mobile-navbar.js

@@ -10,11 +10,6 @@
     document.documentElement.classList.toggle('is-clipped--navbar')
     this.classList.toggle('is-active')
     var menu = document.getElementById(this.dataset.target)
-    if (menu.classList.toggle('is-active')) {
-      menu.style.maxHeight = ''
-      var expectedMaxHeight = window.innerHeight - Math.round(menu.getBoundingClientRect().top)
-      var actualMaxHeight = parseInt(window.getComputedStyle(menu).maxHeight, 10)
-      if (actualMaxHeight !== expectedMaxHeight) menu.style.maxHeight = expectedMaxHeight + 'px'
-    }
+    menu.classList.toggle('is-active')
   }
 })()

src/partials/header-content.hbs

@@ -11,7 +11,7 @@
         </div>
       </div>
       {{/if}}
-      <button class="navbar-burger" data-target="topbar-nav">
+      <button class="navbar-burger" data-target="navbar-sub">
         <span></span>
         <span></span>
         <span></span>
@@ -22,7 +22,7 @@
       </div>
       </div>
     </nav>
-    <nav class="navbar-sub">
+    <nav id="navbar-sub" class="navbar-sub">
       <div class="container">
         {{> navbar}}