Merge pull request #72 from colis/feature/header-redesign

Header redesign
colis · Dec 9, 2024 · 0eb378e · 0eb378e
2 parents ad54906 + a847890
commit 0eb378e
Show file tree

Hide file tree

Showing 23 changed files with 141 additions and 411 deletions.
diff --git a/composer.json b/composer.json
@@ -39,7 +39,6 @@
     "colis/wally-core": "*",
     "wpackagist-plugin/advanced-custom-fields": "^6.0",
     "wpackagist-plugin/imagify": "^2.0",
-    "wpackagist-plugin/instagram-feed": "^6.0.4",
     "wpackagist-plugin/wordpress-seo": "^24.0",
     "wpackagist-plugin/wordfence": "^8.0"
   },

diff --git a/composer.lock b/composer.lock
diff --git a/wp-content/themes/wally/assets/js/lib/typed.js b/wp-content/themes/wally/assets/js/lib/typed.js
diff --git a/wp-content/themes/wally/assets/js/navigation.js b/wp-content/themes/wally/assets/js/navigation.js
@@ -1,10 +1,10 @@
 /**
  * File navigation.js.
- *
- * Handles toggling the navigation menu for small screens and enables TAB key
- * navigation support for dropdown menus.
  */
 
+const header = document.querySelector( '.c-header' );
+const adminBar = document.querySelector( '#wpadminbar' );
+
 if ( 'loading' === document.readyState ) {
 	// The DOM has not yet been loaded.
 	document.addEventListener( 'DOMContentLoaded', initNavigation );
@@ -15,42 +15,36 @@ if ( 'loading' === document.readyState ) {
 
 // Initiate the menus when the DOM loads.
 function initNavigation() {
-	initNavToggle();
+	initStickyToggle();
 }
 
 /**
- * Add event listener to the button that handles toggling the mobile menu.
+ * Add event listener on scroll event that handles toggling the sticky menu.
  */
-function initNavToggle() {
-	const toggleButton = document.querySelector( '.js-menu-button' );
-
-	toggleButton.addEventListener( 'click', function () {
-		toggleMainNavigation();
-	} );
-}
-
-function toggleMainNavigation() {
-	const html = document.querySelector( 'html' );
-
-	if ( html.classList.contains( 'navigation-open' ) ) {
-		disableMainNavigation();
-	} else {
-		enableMainNavigation();
-	}
+function initStickyToggle() {
+	toggleStickyNavigation();
 }
 
-function enableMainNavigation() {
-	const html = document.querySelector( 'html' );
-	const toggleButton = document.querySelector( '.js-menu-button' );
-
-	html.classList.add( 'navigation-open' );
-	toggleButton.setAttribute( 'aria-expanded', 'true' );
-}
-
-function disableMainNavigation() {
-	const html = document.querySelector( 'html' );
-	const toggleButton = document.querySelector( '.js-menu-button' );
-
-	html.classList.remove( 'navigation-open' );
-	toggleButton.setAttribute( 'aria-expanded', 'false' );
+function toggleStickyNavigation() {
+	// Add a "sentinel" element to track the scroll position of the page.
+	const sentinel = document.createElement( 'div' );
+	sentinel.setAttribute( 'id', 'jump-links-sentinel' );
+	header.after( sentinel );
+
+	const offset = adminBar?.offsetHeight || 0;
+
+	const observer = new window.IntersectionObserver(
+		( [ entry ] ) => {
+			header.classList.toggle(
+				'sticky',
+				! entry.isIntersecting &&
+					entry.boundingClientRect.top - offset < 0
+			);
+		},
+		{
+			rootMargin: `${ offset * -1 }px`,
+		}
+	);
+
+	observer.observe( sentinel );
 }
diff --git a/wp-content/themes/wally/assets/js/typed.js b/wp-content/themes/wally/assets/js/typed.js
diff --git a/wp-content/themes/wally/assets/sass/00-settings/_typography.scss b/wp-content/themes/wally/assets/sass/00-settings/_typography.scss
@@ -2,7 +2,7 @@
 // TYPOGRAPHY
 // ==========================================================================
 
-@import url(https://fonts.googleapis.com/css2?family=Raleway:wght@300;700;800&display=swap);
+@import url(https://fonts.googleapis.com/css2?family=Raleway:wght@300;600;700;800&display=swap);
 
 :root {
 	// Families
@@ -11,6 +11,7 @@
 
 	// Weights
 	--font-weight-primary-light: 300;
+	--font-weight-primary-semi-bold: 600;
 	--font-weight-primary-bold: 700;
 	--font-weight-headings-regular: 800;
 

diff --git a/wp-content/themes/wally/assets/sass/05-components/_header.scss b/wp-content/themes/wally/assets/sass/05-components/_header.scss
@@ -2,87 +2,32 @@
 HEADER
 ========================================================================== */
 
-html.navigation-open {
-	overflow: hidden;
-}
-
-.c-main-nav {
-	display: flex;
-	height: 100%;
-}
-
-.c-menu-button__wrapper {
-	display: flex;
-	flex-grow: 1;
-	justify-content: flex-end;
-}
-
-.c-menu-button {
-	@include reset_button_element;
-	cursor: pointer;
-	width: 30px;
-}
-
-.c-menu-button__icon {
-	position: absolute;
-	right: var(--spacing-m);
-	width: 28px;
-	height: 4px;
-	background-color: var(--color-catalina-blue);
-	transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
-
-	&::before,
-	&::after {
-		content: "";
-		position: absolute;
-		display: block;
-		width: 28px;
-		height: 4px;
-		background-color: inherit;
-	}
+.c-header {
+	padding-top: var(--spacing-l);
+	width: 100%;
 
-	&::before {
-		top: -10px;
-		transition: top 0.1s ease-in 0.25s, opacity 0.1s ease-in;
+	&.sticky {
+		position: sticky;
+		top: 0;
+		z-index: 1;
+		padding-top: var(--spacing-s);
+		background-color: #fff;
 
-		html.navigation-open & {
-			top: 0;
-			transition: top 0.1s ease-out, opacity 0.1s ease-out 0.12s;
-			opacity: 0;
+		.c-main-nav {
+			row-gap: 0;
 		}
-	}
-
-	&::after {
-		bottom: -10px;
-		transition: bottom 0.1s ease-in 0.25s, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
 
-		html.navigation-open & {
-			bottom: 0;
-			transition: bottom 0.1s ease-out, transform 0.22s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;
-			transform: rotate(-90deg);
+		.c-navigation__menu-wrapper {
+			margin-top: 0;
 		}
 	}
-
-	html.navigation-open & {
-		transition: transform 0.22s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;
-		transform: rotate(225deg);
-	}
 }
 
-.c-navigation {
-	position: fixed;
-	top: calc(100% - 80vh);
-	left: 0;
-	right: 0;
-	bottom: 0;
-	height: 100%;
-	width: 100%;
-	visibility: hidden;
-	transition: visibility 0.7s;
-
-	html.navigation-open & {
-		visibility: visible;
-	}
+.c-main-nav {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	row-gap: var(--spacing-m);
 }
 
 .menu-item {
@@ -91,38 +36,19 @@ html.navigation-open {
 
 .c-navigation__menu-wrapper {
 	padding: 0;
-	transform: translateX(100vw);
-	transition: transform 0.5s cubic-bezier(0.86, 0.01, 0.77, 0.78);
+	display: flex;
+	column-gap: var(--spacing-xxl);
 
-	html.navigation-open & {
-		transform: translateX(0);
-		transition: transform 0.7s cubic-bezier(0.82, 0.01, 0.77, 0.78);
+	@include for-tablet-landscape-up {
+		column-gap: calc( var(--spacing-xxl) * 2 );
 	}
-}
-
-#menu-main-navigation {
 
 	a {
-		@include font_prop_heading;
-	}
-}
-
-#menu-social-networks {
-	display: inline-grid;
-	grid-template-columns: auto;
-	grid-template-rows: 1fr;
-	grid-auto-flow: column;
-	column-gap: var(--spacing-xs);
+		font-weight: var(--font-weight-primary-semi-bold);
+		text-transform: uppercase;
 
-	a {
-		@include font_prop_body;
+		@include for-tablet-landscape-up {
+			font-size: 20px;
+		}
 	}
 }
-
-#main {
-	transition: transform 0.7s cubic-bezier(0.91, 0.01, 0.6, 0.99);
-}
-
-.navigation-open #main {
-	transform: translateX(-100vw);
-}
diff --git a/wp-content/themes/wally/assets/sass/05-components/_logo.scss b/wp-content/themes/wally/assets/sass/05-components/_logo.scss
@@ -3,12 +3,11 @@ LOGO
 ========================================================================== */
 
 .c-logo {
-	@include font_prop_body("bold");
-	color: var(--color-catalina-blue);
-	text-decoration: none;
 
-	&:hover,
-	&:focus {
-		color: inherit;
+	.c-header.sticky & {
+
+		svg {
+			transform: scale(0.6);
+		}
 	}
 }