From 221ec55d2b38d5d07097bdb12d61a1371182efee Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 5 Sep 2019 17:16:22 +0200
Subject: [PATCH] wip #3003 @1

---
 resources/js/app.js                       | 18 +++++++++-
 resources/styles/components/header.styl   | 42 +++++++++++++++++++++++
 resources/styles/components/mmenu.styl    | 19 ++++++++++
 resources/views/layouts/app.blade.php     |  2 +-
 resources/views/partials/header.blade.php |  3 +-
 5 files changed, 81 insertions(+), 3 deletions(-)
 create mode 100644 resources/styles/components/mmenu.styl

diff --git a/resources/js/app.js b/resources/js/app.js
index 4cbe727..0af809c 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -82,7 +82,7 @@ const app = new Vue({
             let root = this;
             axios.post('/ajax/cart', data)
                 .then(function (response) {
-                    if(response.data.needs_update) {
+                    if (response.data.needs_update) {
                         root.items = response.data.cart_data;
                     }
 
@@ -122,3 +122,19 @@ const app = new Vue({
 
 
 });
+
+window.addEventListener('scroll', function () {
+    checkScroll();
+}, {passive: true});
+
+function checkScroll() {
+    window.headerHeight = 134;
+    if (document.documentElement.scrollTop > 200) {
+        document.getElementById('site-header').classList.add('minimized');
+        window.headerHeight = 60;
+    } else {
+        document.getElementById('site-header').classList.remove('minimized');
+    }
+}
+
+checkScroll();
diff --git a/resources/styles/components/header.styl b/resources/styles/components/header.styl
index 393d013..222ac1e 100644
--- a/resources/styles/components/header.styl
+++ b/resources/styles/components/header.styl
@@ -1,5 +1,30 @@
+#header-placeholder
+  height 134px
+
 .site-header
+  --transition-duration 500ms
+
   @apply bg-navy text-white text-lg font-display font-medium antialiased
+  position fixed
+  transition height var(--transition-duration)
+  width 100%
+  z-index 10
+  height 134px
+
+  .container
+    transition padding-top var(--transition-duration), padding-bottom var(--transition-duration)
+
+  .nav
+    height: 67px
+    transition height var(--transition-duration)
+
+  .logo
+    height 70px
+    transition height var(--transition-duration)
+
+    img
+      height 70px
+      transition height var(--transition-duration)
 
   +below($breakpoint-menu)
     .mobile-menu-icon
@@ -12,3 +37,20 @@
 
     .nav
       display: none
+
+  &.minimized
+    height: 60px
+
+    .container
+      padding-top: 8px
+      padding-bottom: 8px
+
+    .nav
+      height: 44px
+
+    .logo
+      height: 44px
+
+      img
+        height: 44px
+
diff --git a/resources/styles/components/mmenu.styl b/resources/styles/components/mmenu.styl
new file mode 100644
index 0000000..b5baeff
--- /dev/null
+++ b/resources/styles/components/mmenu.styl
@@ -0,0 +1,19 @@
+.mm
+  font-family: theme('fontFamily.display')
+  font-weight: 400
+  color: #152f4e
+  --mm-max-width: 512px
+  --mm-item-indent: 30px;
+  --mm-item-height: 65px
+
+  &:after
+    opacity 1
+
+  &:before
+    opacity 1
+
+  li
+    &:after
+      margin-left 0
+    &:before
+      opacity: 1;
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 1717dbc..64c14da 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -1,6 +1,6 @@
 @prepend('stylesheets')
     <link href="{{ mix('css/app.css') }}" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Barlow:500,600|Muli:400,700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Barlow:400,500,600|Muli:400,700&display=swap" rel="stylesheet">
 @endprepend
 
 @prepend('scripts')
diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index 2687fb7..347e8d6 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -1,5 +1,6 @@
 @include('partials.nav-mobile')
-<header class="site-header">
+<div id="header-placeholder"></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">
-- 
2.39.5