wip #2922 @1.5

diff --git a/resources/js/app.js b/resources/js/app.js
index 69a80df98015235c44b7fbc03c36e4f9df881956..8bc68f499de955c1fcf58bef2e2b93fcbe8d4df7 100644 (file)
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -138,9 +138,11 @@ function checkScroll() {
     var scroll = getBodyScrollTop();
     if (scroll > 200) {
         document.getElementById('site-header').classList.add('minimized');
+        document.getElementById('mobile-menu-icon').classList.add('minimized');
         window.headerHeight = 60;
     } else {
         document.getElementById('site-header').classList.remove('minimized');
+        document.getElementById('mobile-menu-icon').classList.remove('minimized');
     }
     document.querySelector('html').style.setProperty('--header-height', window.headerHeight + 'px');
 }

diff --git a/resources/js/menu.js b/resources/js/menu.js
index aab57eaee53669006ee73ec698989545df5405ff..90595f9640acb54fe03a99a919e07e6b2fdd75a8 100644 (file)
--- a/resources/js/menu.js
+++ b/resources/js/menu.js
@@ -16,9 +16,32 @@ document.addEventListener(
 
         document.querySelector(`a[href="#menu"]`)
             .addEventListener('click', (event) => {
-                mmenu.open();
-                event.preventDefault();
-                event.stopPropagation();
-            });
+                    mmenu.open();
+                    event.preventDefault();
+                    event.stopPropagation();
+
+                    if (null === document.querySelector('.mm--close')) {
+                        console.log(':)');
+                        nav.innerHTML = '<a class="mm--close"></a>' + nav.innerHTML;
+
+                        document.querySelector('.mm--close').addEventListener('click', (event) => {
+                            mmenu.close();
+                        });
+
+                        setInterval(function () {
+                            checkOpenSubmenu()
+                        }, 250);
+                    }
+                }
+            );
     }
 );
+
+function checkOpenSubmenu() {
+    console.log(document.querySelector('#mobile-nav.mm--open.mm--main'));
+    if (null === document.querySelector('#mobile-nav.mm--open.mm--main')) {
+        document.body.classList.add('mm--subopen');
+    } else {
+        document.body.classList.remove('mm--subopen');
+    }
+}

diff --git a/resources/styles/components/header.styl b/resources/styles/components/header.styl
index ad5117da99353677b016ad006705ee64a6d2c976..6d6c2b26c6e231980180243dbd107e951f18ea2b 100644 (file)
--- a/resources/styles/components/header.styl
+++ b/resources/styles/components/header.styl
@@ -27,11 +27,6 @@
       transition height var(--transition-duration)
 
   +below($breakpoint-menu)
-    .mobile-menu-icon
-      display: block
-      cursor: pointer
-      flex-shrink: 0
-
     .logo
       @apply mx-auto px-8
 

diff --git a/resources/styles/components/mmenu.styl b/resources/styles/components/mmenu.styl
index b59c1ff812d1fc7db651af3d5aa611766bc31300..2d4eebb9a6b5b672f555cbbb95bec82ef04042d4 100644 (file)
--- a/resources/styles/components/mmenu.styl
+++ b/resources/styles/components/mmenu.styl
@@ -1,3 +1,71 @@
++below($breakpoint-menu)
+  #mobile-menu-icon
+    --transition-duration 500ms
+
+    display: block !important
+    cursor: pointer
+    flex-shrink: 0
+    position fixed
+    top 45px
+    z-index 10000
+    transition top var(--transition-duration)
+
+
+    &.minimized
+      top 8px;
+
+    .nav-icon
+      position: fixed;
+      width: 30px;
+      left 5vw
+      transition left var(--transition-duration)
+
+      .mm-body--open &
+        left var(--mm-item-indent)
+
+      .mm--subopen.mm-body--open &
+        left var(--mm-item-indent)
+
+        &:after, &:before
+          width 17px
+
+        &:after
+          transform: translateY(-6px) rotate(-135deg);
+
+        &:before
+          transform: translateY(6px) rotate(135deg);
+
+
+      &:after, &:before, div
+        width 30px
+        background-color: #c4cad2;
+
+        .mm-body--open &
+          background-color: theme('colors.navy')
+        content: '';
+        display: block;
+        height: 2px;
+        margin: 10px 0;
+        transition: all var(--transition-duration) ease-in-out;
+
+      &:after
+        width 15px
+
+      &:before
+        .mm-body--open &
+          transform: translateY(12px) rotate(135deg);
+
+      &:after
+        .mm-body--open &
+          transform: translateY(-12px) rotate(-135deg);
+          width 100%
+
+      div
+        .mm-body--open &
+          transform scale(0)
+
+
+#mobile-menu-icon
 .mm
   font-family: theme('fontFamily.display')
   font-weight: 400
@@ -6,11 +74,30 @@
   --mm-item-height: var(--header-height)
   --mm-item-item-height: 65px
 
+  .mm--close
+    padding 0
+    height: var(--header-height);
+    position: absolute;
+    top 0
+    left 0
+    width: 100% !important
+    z-index: 0;
+    cursor pointer
+
+    .mm--subopen &
+      display none
+
+  &.mm--main
+    &:after
+      text-indent 60px
+      pointer-events none
+
   &:after
     opacity 1
+    text-indent 30px
 
   &:before
-    opacity 1
+    display none
 
   ul.mm--open
     &.mm--parent

diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index 347e8d6bfc3a9f369e7c380917e06e91db722514..f9a08c5dbf4cb774b21167aa37bbdb421c257c0d 100644 (file)
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -1,14 +1,15 @@
 @include('partials.nav-mobile')
 <div id="header-placeholder"></div>
+<div id="mobile-menu-icon" class="hidden">
+    <a href="#menu">
+        <div class="nav-icon">
+            <div></div>
+        </div>
+    </a>
+</div>
 <header id="site-header" class="site-header">
     <div class="container flex items-center py-8 relative z-30">
 
-        <div class="mobile-menu-icon hidden">
-            <a href="#menu">
-                <img src="{{ asset('images/icon-burger-menu.svg') }}" alt="Menu">
-            </a>
-        </div>
-
         <div class="logo">
             @include('partials.logo')
         </div>