resolves #82 shrink nav menu to fit available space (PR #83)

Author: mojavelinux

src/css/footer.css

@@ -6,6 +6,8 @@ footer.footer {
   padding: 2rem 1rem;
   display: flex;
   flex-direction: column;
+  position: relative;
+  z-index: var(--z-index-footer);
 }
 
 .footer p {

src/css/nav.css

@@ -59,8 +59,9 @@
   .nav {
     top: var(--navbar-height);
     box-shadow: none;
-    position: sticky;
+    position: fixed;
     height: var(--nav-height--desktop);
+    width: inherit;
   }
 }
 

src/css/vars.css

@@ -163,5 +163,6 @@
   --z-index-nav: 2;
   --z-index-toolbar: 3;
   --z-index-page-version-menu: 4;
-  --z-index-navbar: 5;
+  --z-index-footer: 5;
+  --z-index-navbar: 6;
 }

src/js/01-nav.js

@@ -12,6 +12,7 @@
   var menuPanel = navContainer.querySelector('[data-panel=menu]')
   if (!menuPanel) return
   var nav = navContainer.querySelector('.nav')
+  var navBounds = { encroachingElement: document.querySelector('footer.footer') }
 
   var currentPageItem
   if (menuPanel.classList.contains('is-loading')) {
@@ -31,6 +32,10 @@
     }
   }
 
+  fitNavInit({})
+  window.addEventListener('load', fitNavInit)
+  window.addEventListener('resize', fitNavInit)
+
   menuPanel.querySelector('.nav-menu-toggle').addEventListener('click', function () {
     var collapse = !this.classList.toggle('is-active')
     find(menuPanel, '.nav-item > .nav-item-toggle').forEach(function (btn) {
@@ -155,4 +160,27 @@
   function find (from, selector) {
     return [].slice.call(from.querySelectorAll(selector))
   }
+
+  function fitNavInit (e) {
+    if (e.type) {
+      window.removeEventListener('scroll', fitNav)
+      nav.style.height = ''
+    }
+    if (window.getComputedStyle(nav).position === 'fixed') {
+      navBounds.availableHeight = window.innerHeight
+      navBounds.preferredHeight = nav.getBoundingClientRect().height
+      fitNav()
+      window.addEventListener('scroll', fitNav)
+    }
+    if (e.type !== 'resize' && currentPageItem) scrollItemToMidpoint(menuPanel, currentPageItem)
+  }
+
+  function fitNav () {
+    var scrollDatum = menuPanel.scrollTop + menuPanel.offsetHeight
+    var reclaimedHeight = navBounds.availableHeight - navBounds.encroachingElement.getBoundingClientRect().top
+    nav.style.height = reclaimedHeight > 0
+      ? Math.max(0, Math.round(navBounds.preferredHeight - reclaimedHeight)) + 'px'
+      : ''
+    menuPanel.scrollTop = scrollDatum - menuPanel.offsetHeight
+  }
 })()