Merge pull request #124 from daviddarnes/fix-mobile-nav-resize

[Fix]: Prevent nav being hidden when upscaling browser size

Author: daviddarnes

_includes/nav-header.html

@@ -14,41 +14,41 @@
       </li>
     {% endfor %}
   </ul>
+  <button class="button  button--nav" aria-label="Menu toggle">
+    {% include icon.html id="nav" title="Menu" %}
+  </button>
 </nav>
 {% else %}
   {% include nav-default.html %}
 {% endif %}
 
-<template id="buttontoggle">
-  <button class="button  button--nav" aria-label="Menu toggle">
-    {% include icon.html id="nav" title="Menu" %}
-  </button>
-</template>
-
 <script type="text/javascript">
+  // Get list and button
+  const navList = document.querySelector('.header .list--nav')
+  const button  = document.querySelector('.header .button--nav')
+
+  // Hide nav and apply toggle
+  const collapseNav = () => {
+    if (document.body.clientWidth < 640) {
+      navList.style.setProperty('--listHeight', `-${navList.offsetHeight}px`)
+    } else {
+      navList.removeAttribute('style')
+    }
 
-const nav = document.querySelector('.nav')
-const buttonTemplate = document.querySelector('#buttontoggle')
-const button = document.importNode(buttonTemplate.content, true)
-nav.appendChild(button)
-
-const applyToggle = (list, button, breakpoint) => {
-  const navList = document.querySelector(list)
-  if (document.body.clientWidth < breakpoint) {
-    const navHeight = navList.clientHeight
-    const navButton = document.querySelector(button)
-    navList.style.maxHeight = '0px'
-
-    navButton.onclick = () => {
-      if (navList.style.maxHeight == '0px') {
-        navList.style.maxHeight = `${navHeight}px`
+    button.onclick = () => {
+      navList.style.setProperty('transition', `margin .1s`)
+      if (navList.style.getPropertyValue('--listHeight')) {
+        navList.style.removeProperty('--listHeight')
       } else {
-        navList.style.maxHeight = '0px'
+        navList.style.setProperty('--listHeight', `-${navList.offsetHeight}px`)
       }
     }
   }
-}
 
-applyToggle('.list--nav', '.button', 640)
+  collapseNav()
 
+  // Check on resize if to collapse nav
+  window.addEventListener('resize', () => {
+    collapseNav()
+  })
 </script>

_sass/_theme.scss

@@ -39,6 +39,8 @@ body {
   display: flex;
   flex-direction: column-reverse;
   align-items: flex-end;
+  justify-content: flex-end;
+  overflow: hidden;
 }
 
 .feature {
@@ -175,7 +177,7 @@ body {
   list-style: none;
   &--nav {
     overflow: hidden;
-    transition: .2s;
+    margin-bottom: var(--listHeight, 0);
   }
   .item--post,
   .item--result,