From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 5 Sep 2019 16:22:57 +0000 (+0200)
Subject: wip #2922 @2
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=0e7f8ce852412a3c1b53f05de9359f406b8cf960;p=pmi.git

wip #2922 @2
---

diff --git a/resources/js/app.js b/resources/js/app.js
index eb2a499..69a80df 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -142,6 +142,7 @@ function checkScroll() {
     } else {
         document.getElementById('site-header').classList.remove('minimized');
     }
+    document.querySelector('html').style.setProperty('--header-height', window.headerHeight + 'px');
 }
 
 checkScroll();
diff --git a/resources/js/menu.js b/resources/js/menu.js
index 3f195ef..aab57ea 100644
--- a/resources/js/menu.js
+++ b/resources/js/menu.js
@@ -6,8 +6,8 @@ MmenuLight.prototype.offcanvas = offcanvas;
 
 document.addEventListener(
     'DOMContentLoaded', () => {
-        let nav=document.getElementById("mobile-nav");
-        window.mmenu = new MmenuLight(nav, {title: "Menu"});
+        let nav = document.getElementById("mobile-nav");
+        window.mmenu = new MmenuLight(nav, {title: "Menu", selected: 'active'});
         window.menu_breakpoint = 1023; // Note: this should match the menu CSS breakpoint in setup.styl!
 
         mmenu.enable(`(max-width: ${menu_breakpoint}px)`);
diff --git a/resources/styles/components/mmenu.styl b/resources/styles/components/mmenu.styl
index b5baeff..b59c1ff 100644
--- a/resources/styles/components/mmenu.styl
+++ b/resources/styles/components/mmenu.styl
@@ -2,9 +2,9 @@
   font-family: theme('fontFamily.display')
   font-weight: 400
   color: #152f4e
-  --mm-max-width: 512px
   --mm-item-indent: 30px;
-  --mm-item-height: 65px
+  --mm-item-height: var(--header-height)
+  --mm-item-item-height: 65px
 
   &:after
     opacity 1
@@ -12,8 +12,29 @@
   &:before
     opacity 1
 
+  ul.mm--open
+    &.mm--parent
+      li
+        --mm-item-height: var(--header-height)
+
+        ul.mm--open
+          &.mm--parent
+            li
+              --mm-item-height: var(--header-height)
+
+              ul.mm--open
+                li
+                  --mm-item-height: var(--mm-item-item-height)
+
+          li
+            --mm-item-height: var(--mm-item-item-height)
+
+    li
+      --mm-item-height: var(--mm-item-item-height)
+
   li
     &:after
       margin-left 0
+
     &:before
       opacity: 1;