WIP #2779 @5.00

diff --git a/wp-content/themes/c6/app/setup.php b/wp-content/themes/c6/app/setup.php
index a6e2e9845fb71ed9c697b3708c3cf65c1ce7ccbf..359ca55acadf2792366b06ece5943a6dc88a3cd7 100644 (file)
--- a/wp-content/themes/c6/app/setup.php
+++ b/wp-content/themes/c6/app/setup.php
@@ -50,6 +50,7 @@ add_action('wp_enqueue_scripts', function () {
     // On 404 pages, this wasn't happening.
     wp_enqueue_style('sage/main.css', asset_path('styles/main.css'), ['elementor-frontend', 'elementor-animations'], null);
     wp_enqueue_script('sage/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);
+    wp_enqueue_script('sage/navigation.js', asset_path('scripts/navigation.js'), ['jquery'], null, true);
 
     if (is_single() && comments_open() && get_option('thread_comments')) {
         wp_enqueue_script('comment-reply');

diff --git a/wp-content/themes/c6/resources/assets/config.json b/wp-content/themes/c6/resources/assets/config.json
index 873edffa9b1b03e40d8976b8950c8d01a9319508..e47afd6395acda2aba19cd8532201ee651dc2dfd 100644 (file)
--- a/wp-content/themes/c6/resources/assets/config.json
+++ b/wp-content/themes/c6/resources/assets/config.json
@@ -9,6 +9,9 @@
     ],
     "timeline": [
       "./scripts/timeline.js"
+    ],
+    "navigation": [
+      "./scripts/navigation.js"
     ]
   },
   "publicPath": "/wp-content/themes/c6",

diff --git a/wp-content/themes/c6/resources/assets/scripts/navigation.js b/wp-content/themes/c6/resources/assets/scripts/navigation.js
new file mode 100644 (file)
index 0000000..3e3a1ea
--- /dev/null
+++ b/wp-content/themes/c6/resources/assets/scripts/navigation.js
@@ -0,0 +1,42 @@
+/* eslint-disable */
+jQuery(document).ready(function($){
+    var mainHeader = $('header.site'),
+        headerHeight = mainHeader.height();
+
+    //set scrolling variables
+    var scrolling = false,
+        previousTop = 0,
+        currentTop = 0,
+        scrollDelta = 10,
+        scrollOffset = 500;
+
+    $(window).on('scroll', function(){
+
+        if( !scrolling ) {
+            scrolling = true;
+            mainHeader.addClass('scrolling');
+            (!window.requestAnimationFrame)
+                ? setTimeout(autoHideHeader, 250)
+                : requestAnimationFrame(autoHideHeader);
+        }
+
+        if(currentTop < 15){
+            mainHeader.removeClass('scrolling');
+        }
+    });
+
+    function autoHideHeader() {
+        currentTop = $(window).scrollTop();
+
+        if (previousTop - currentTop > scrollDelta) {
+            //if scrolling up...
+            mainHeader.removeClass('is-hidden');
+        } else if( currentTop - previousTop > scrollDelta && currentTop > scrollOffset) {
+            //if scrolling down...
+            mainHeader.addClass('is-hidden');
+        }
+
+        previousTop = currentTop;
+        scrolling = false;
+    }
+});
\ No newline at end of file

diff --git a/wp-content/themes/c6/resources/assets/scripts/routes/common.js b/wp-content/themes/c6/resources/assets/scripts/routes/common.js
index 16898d3576550e264766dba874f06a682f420179..174b67aa4d548d6ed90f18daeba04ff956c5394d 100644 (file)
--- a/wp-content/themes/c6/resources/assets/scripts/routes/common.js
+++ b/wp-content/themes/c6/resources/assets/scripts/routes/common.js
@@ -33,6 +33,9 @@ export default {
     // Menu toggle
     $('#full-menu-opener').on('click', function(event) {
 
+      // Add class earlier than normal so we can hide the logo before menu fully opens
+      $('body').addClass('offcanvas-menu-open');
+
       // On larger screens, the menu button just hides the menu
       //if ($(window).width() < 1024) {
       $.sidr('open', 'offcanvas-menu');

diff --git a/wp-content/themes/c6/resources/assets/styles/common/variables.styl b/wp-content/themes/c6/resources/assets/styles/common/variables.styl
index 426499408193f98132e9c255903d2a11f035f9d0..fcb334c0592c6a0831f2144983b88c65ab1e113d 100644 (file)
--- a/wp-content/themes/c6/resources/assets/styles/common/variables.styl
+++ b/wp-content/themes/c6/resources/assets/styles/common/variables.styl
@@ -22,11 +22,12 @@ $font-size = {
 }
 
 // Breakpoints in Rupture (https://github.com/jescalan/rupture)
-rupture.scale        = 0 400px   768px   1024px
-rupture.scale-names  = 'small' 'medium' 'large'
-rupture.anti-overlap = -1px // Results in +below(1000px) being max-width: 999px and +above(1000px) being min-width: 1000px
-$breakpoint-columns  = 900px
-$breakpoint-menu     = 850px
+rupture.scale         = 0 400px   768px   1024px
+rupture.scale-names   = 'small' 'medium' 'large'
+rupture.anti-overlap  = -1px // Results in +below(1000px) being max-width: 999px and +above(1000px) being min-width: 1000px
+$breakpoint-columns   = 900px
+$breakpoint-menu      = 850px
+$offcanvas-menu-width = 260px
 
 // Lost Grid setup (mostly used for Products)
 @lost gutter 5%

diff --git a/wp-content/themes/c6/resources/assets/styles/components/navigation-offcanvas.styl b/wp-content/themes/c6/resources/assets/styles/components/navigation-offcanvas.styl
index 163fc4c683c6e93bc3811c54ac68815f06d19a3a..295c0ac7e14bb477808c278edb8b27b8e65d36fe 100644 (file)
--- a/wp-content/themes/c6/resources/assets/styles/components/navigation-offcanvas.styl
+++ b/wp-content/themes/c6/resources/assets/styles/components/navigation-offcanvas.styl
@@ -1,5 +1,3 @@
-$sidebar-width = 260px
-
 #offcanvas-menu
   background-color: #000
   color: #fff
@@ -8,16 +6,16 @@ $sidebar-width = 260px
   top: 0
   height: 100%
   z-index: 999999
-  width: $sidebar-width
+  width: $offcanvas-menu-width
   overflow-x: hidden
   overflow-y: auto
 
   &.right
     left: auto
-    right: - $sidebar-width
+    right: - $offcanvas-menu-width
 
   &.left
-    left: - $sidebar-width
+    left: - $offcanvas-menu-width
     right: auto
 
   .header-logo

diff --git a/wp-content/themes/c6/resources/assets/styles/layouts/header.styl b/wp-content/themes/c6/resources/assets/styles/layouts/header.styl
index 5b59737d228c2609a530fc3a5b5ab45ead7976de..55b4495a16b811fc21f1d0c7d75fc2ef2435fd53 100644 (file)
--- a/wp-content/themes/c6/resources/assets/styles/layouts/header.styl
+++ b/wp-content/themes/c6/resources/assets/styles/layouts/header.styl
@@ -34,24 +34,30 @@ header.site
 
   // Hero block header overrides
   .hero-header &, .home & // Also applied for home since .hero-header class seems to be added to body too late for Elementor editor
-    position: absolute
     width: 100%
     color: #fff
     .inner
       background-color: transparent
 
-    .menu-icon
-      fill: #fff
-
 // Main logo
 .header-logo
   flex: 0 1 auto
   padding-right: 50px // Ensure some breathing space between logo and burger menu icon
+  transition: opacity 0.3s ease-out
 
   &-svg
     max-width: 84px
     height: auto
 
+  // When the menu is open, the logo doesn't move because it is fixed position
+  // So we hide it...
+  .offcanvas-menu-open &
+    opacity: 0
+    transition: none
+
+  #offcanvas-menu &
+    opacity: 1
+
 
 .locales
   flex: 0 1 auto
@@ -75,7 +81,6 @@ header.site
       height: 0.6em // Needed for IE 11
       overflow: hidden // Also needed for IE 11
 
-
       path
         stroke: currentColor
 
@@ -121,5 +126,23 @@ header.site
     display: block
 
 .menu-icon
-  width: r(60px)
-  height: @width
+  height: 52px
+  width: 52px
+  fill: currentColor
+
+header.site
+  position: fixed
+  top: 0
+  left: 0
+  width: 100%
+  transform: translateZ(0)
+  will-change: transform
+  transition: all .5s ease
+
+header.site.is-hidden
+  transform: translateY(-100%)
+
+header.site.scrolling
+  background: white
+  color: #000
+  transition: all .5s ease
\ No newline at end of file