make correction for view height when opening navbar menu on mobile

diff --git a/src/js/05-mobile-navbar.js b/src/js/05-mobile-navbar.js
index 17f0452..b718738 100644 (file)
--- a/src/js/05-mobile-navbar.js
+++ b/src/js/05-mobile-navbar.js
@@ -7,8 +7,14 @@
 
   function toggleNavbarMenu (e) {
     e.stopPropagation() // trap event
-    this.classList.toggle('is-active')
-    document.getElementById(this.dataset.target).classList.toggle('is-active')
     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)
+      if (actualMaxHeight !== expectedMaxHeight) menu.style.maxHeight = expectedMaxHeight + 'px'
+    }
   }
 })()