wip #3003 @1

diff --git a/resources/js/app.js b/resources/js/app.js
index 4cbe7272988d4533a60d38da883335075021e6f5..0af809c08f33889436bade2ba3f6ea85ada6f5d8 100644 (file)
--- 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 393d01326398f9ebbf25d08cb864532503648585..222ac1eeec9f703363222e9d1cd5db9301b444fc 100644 (file)
--- 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 (file)
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 1717dbccafb64ed44279944fa92c7f513952d254..64c14dae7f74783c55c5756312e0513c0b4ecf97 100644 (file)
--- 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 2687fb73ae97c1b9503773e8ce423b5666402aaf..347e8d6bfc3a9f369e7c380917e06e91db722514 100644 (file)
--- 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">