fix header menu max height

assets/js/theme/design-system/mainMenu.js

@@ -60,6 +60,7 @@ class MainMenu {
     resize () {
         const isMobile = window.innerWidth <= breakpoints.md;
         document.documentElement.style.setProperty('--header-height', this.element.offsetHeight + 'px');
+        document.documentElement.style.setProperty('--header-menu-max-height', (window.innerHeight - this.element.offsetHeight) + 'px');
         
         // is state changed ?
         if (this.state.isMobile === isMobile) {

assets/sass/_theme/design-system/layout.sass

@@ -13,6 +13,7 @@
     --grid-gutter: #{$grid-gutter}
     --grid-max-width: #{$grid-max-width}
     --header-height: #{$header-height}
+    --header-menu-max-height: calc(100vh - var(--header-height) - #{$spacing4})
     @include media-breakpoint-up(desktop)
         --header-height: #{$header-height-desktop}
 

assets/sass/_theme/design-system/nav.sass

@@ -7,12 +7,13 @@
         opacity: 0
 
 .menu
+    
     @include media-breakpoint-down(desktop)
         -webkit-flex-basis: 100vw
         display: none
         flex-basis: 100vw
         margin-top: $spacing1
-        max-height: calc(100vh - var(--header-height) - #{$spacing4})
+        max-height: var(--header-menu-max-height)
         overflow: auto
     a,
     a:focus,