*/
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script('sage/vendor', asset('scripts/vendor.js')->uri(), [], null, true);
- wp_enqueue_script('sage/app', asset('scripts/app.js')->uri(), ['sage/vendor'], null, true);
+ wp_enqueue_script('sage/app', asset('scripts/app.js')->uri(), ['sage/vendor', 'jquery'], null, true);
wp_add_inline_script('sage/vendor', asset('scripts/manifest.js')->contents(), 'before');
*/
import { router } from 'js-dom-router';
import './menu';
+import './header';
/**
* DOM-based routing
--- /dev/null
+//== Auto-hiding sticky header
+// Adapted from https://codyhouse.co/gem/auto-hiding-navigation
+
+jQuery(document).ready(function($) {
+
+ let container = $('body'),
+ scrolling = false,
+ previousTop = 0,
+ currentTop = 0,
+ scrollDelta = 10,
+ scrollOffset = 200; // How far should we scroll before hiding the header
+
+ $(window).on('scroll', function(){
+
+ if (!scrolling) {
+ scrolling = true;
+ (!window.requestAnimationFrame)
+ ? setTimeout(autoHideHeader, 250)
+ : requestAnimationFrame(autoHideHeader);
+ }
+ });
+
+ function autoHideHeader() {
+ currentTop = $(window).scrollTop();
+
+ if (previousTop - currentTop > scrollDelta) {
+ // Scrolling up...
+ container.removeClass('header-hidden');
+
+ } else if (currentTop - previousTop > scrollDelta && currentTop > scrollOffset) {
+ // Scrolling down...
+ container.addClass('header-hidden');
+ }
+
+ previousTop = currentTop;
+ scrolling = false;
+ }
+
+});
let nav = document.getElementById(menuID);
window.mmenu = new MmenuLight(nav, { title: '' });
- window.menu_breakpoint = 1349; // Note: this should match the menu CSS breakpoint in setup.styl!
+ window.menu_breakpoint = 1023; // Note: this should match the menu CSS breakpoint in setup.styl!
mmenu.enable(`(max-width: ${menu_breakpoint}px)`);
mmenu.offcanvas({
//===== Admin bar tweaks
$breakpoint-admin-bar = 783px
+$breakpoint-admin-bar-absolute = 600px // When admin bar goes from being 'fixed' to 'absolute'
$admin-bar-height = 32px
$admin-bar-height-mobile = 46px
+above($breakpoint-admin-bar)
position: relative
- #mobile-menu
+ header.site, #mobile-menu
top: $admin-bar-height
+ .mobile-menu-trigger
+ top: 30px + $admin-bar-height
+
+below($breakpoint-admin-bar)
- #mobile-menu
+ header.site, #mobile-menu
top: $admin-bar-height-mobile
.mobile-menu-trigger
top: 30px + $admin-bar-height-mobile
+
+ +below($breakpoint-admin-bar-absolute)
+ header.site, #mobile-menu
+ top: 0
+
+ .mobile-menu-trigger
+ top: 30px
// Breakpoints in Rupture (https://github.com/jescalan/rupture)
$breakpoint-columns = 768px // NOTE: this should align with the 'sm' screen value in tailwind.config.js
-$breakpoint-menu = 1350px // This needs to match the MMenu activation setting in menu.js
+$breakpoint-menu = 1024px // This needs to match the MMenu activation setting in menu.js
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-slideshow = 1000px
header.site
- .header-slideshow-present &, .home & // Special case for home page and other pages containing this widget
- //+above($breakpoint-menu)
- +above($breakpoint-slideshow)
- position: absolute
- top: 0
- left: 0
- width: 100%
- background-color: transparent
- z-index: 20
+ transform: translateZ(0)
+ will-change: transform
+ transition: all 0.5s ease
+
+ .header-hidden &
+ transform: translateY(-100%)
+
+// .header-slideshow-present &, .home & // Special case for home page and other pages containing this widget
+// //+above($breakpoint-menu)
+// +above($breakpoint-slideshow)
+// position: absolute
+// top: 0
+// left: 0
+// width: 100%
+// background-color: transparent
+// z-index: 20
.header-cta
padding: 1em 1.8em
line-height: 1.1
+
+ +below(1100px)
+ padding: 0.75em 1.6em
// Burger menu icon + animation
.mobile-menu-trigger
- position: absolute
+ position: fixed
width: 30px
height: @width
top: @width
justify-content: space-between
z-index: 10000 // Needs to sit above MMenu
pointer-events: auto // MMenu disables pointer events outside the menu when it's open
+ transform: translateZ(0)
+ transition-property: opacity
+ transition-duration: 0.3s
+ transition-delay: 0.2s // Delay before coming back into view when header slides down
+
+ // This icon can't be contained inside the header because it needs to sit at the
+ // highest stacking level so it can animate as menu opens and closes. As a result, when
+ // the header auto-hides, it doesn't take the icon with it so we need to handle it differently here
+ .header-hidden &
+ opacity: 0
+ pointer-events: none
+
+ // Set transition delay and duration to zero so it disappears immediately
+ transition-duration: 0s
+ transition-delay: 0s
+above($breakpoint-menu)
display: none
@apply border-b-2 border-transparent // Reserve space for active border
@apply py-1 leading-tight // Adjust active border spacing
+ +below(1400px)
+ @apply mx-4
+ +below(1320px)
+ @apply mx-3
+ +below(1080px)
+ @apply mx-2
+
&.current-menu-item, &.current-menu-parent
@apply border-pink
-<header class="site bg-white font-display font-medium uppercase text-sm">
- <div class="container relative pl-2v pr-1v pt-8 pb-12 flex items-center justify-between">
- <a class="flex-shrink-0 mr-4"
- style="max-width: 45%; min-width: 180px"
+<header class="site sticky top-0 z-20 bg-white font-display font-medium uppercase text-sm">
+ <div class="container relative px-1v py-8 flex items-center justify-between">
+ <a class="mr-4"
+ style="max-width: 45%"
href="{{ home_url('/') }}"
aria-label="<?= _("Go to the home page") ?>">
<img class="header-logo" src="@asset('images/logo.svg')" alt="{{ get_bloginfo('name', 'display') }}">
projects / ccv-wordpress.git / commitdiff