From f146b573d5e2f3e810146d7f14b1be7fa4a2c079 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 5 Sep 2019 20:19:31 +0200
Subject: [PATCH] wip #2922 @1.5

---
 resources/js/app.js                       |  2 +
 resources/js/menu.js                      | 31 +++++++-
 resources/styles/components/header.styl   |  5 --
 resources/styles/components/mmenu.styl    | 89 ++++++++++++++++++++++-
 resources/views/partials/header.blade.php | 13 ++--
 5 files changed, 124 insertions(+), 16 deletions(-)

diff --git a/resources/js/app.js b/resources/js/app.js
index 69a80df..8bc68f4 100644
--- 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 aab57ea..90595f9 100644
--- 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 ad5117d..6d6c2b2 100644
--- 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 b59c1ff..2d4eebb 100644
--- 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 347e8d6..f9a08c5 100644
--- 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>
-- 
2.39.5