wip #2922 @2

diff --git a/resources/js/app.js b/resources/js/app.js
index eb2a49937e67341cc1e4ff8a689c08022c55a79e..69a80df98015235c44b7fbc03c36e4f9df881956 100644 (file)
--- 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 3f195ef63ba694f6af0dfd641f2d36411b43ae96..aab57eaee53669006ee73ec698989545df5405ff 100644 (file)
--- 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 b5baeff9f16aa7648614be04c2f1008a9338b436..b59c1ff812d1fc7db651af3d5aa611766bc31300 100644 (file)
--- 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;