feat: hide adminbar on small screens and simplify navigation

Author: thomasguillot

src/my-account/v1/_navigation.scss

@@ -3,13 +3,34 @@
  */
 
 .newspack-my-account {
+	&--logged-in.admin-bar {
+		html:has(&) {
+			margin-top: 0 !important;
+
+			@media ( min-width: 601px ) {
+				margin-top: var(--wp-admin--admin-bar--height) !important;
+			}
+		}
+
+		#wpadminbar {
+			display: none;
+
+			@media ( min-width: 601px ) {
+				display: block;
+			}
+		}
+	}
 	.woocommerce-MyAccount-navigation,
 	.woocommerce-MyAccount-content {
 		transition: transform 125ms ease-in-out;
 	}
 	&.navigation-open {
 		overflow: hidden;
 
+		@media ( min-width: 768px ) {
+			overflow: visible;
+		}
+
 		.woocommerce-MyAccount-navigation,
 		.woocommerce-MyAccount-content {
 			transform: translateX(-100vw);
@@ -105,7 +126,7 @@
 			width: 301px;
 		}
 		@at-root .admin-bar#{&} {
-			top: calc(var(--wp-admin--admin-bar--height) - var(--wp-admin--admin-bar--scroll, var(--wp-admin--admin-bar--height)));
+			top: 0;
 
 			@media ( min-width: 601px ) {
 				top: var(--wp-admin--admin-bar--height);

src/my-account/v1/navigation.js

@@ -8,32 +8,6 @@
 import { domReady } from '../../utils';
 
 domReady( () => {
-	const adminBar = document.getElementById( 'wpadminbar' );
-
-	const updateAdminBarScrolled = () => {
-		const hasAdminBar = !! adminBar;
-		const isSmallScreen = window.innerWidth < 601;
-		const adminBarHeight = hasAdminBar ? adminBar.offsetHeight : 0;
-		const scrollTop = Math.max( window.scrollY, document.documentElement.scrollTop );
-		const adminBarScroll = hasAdminBar && isSmallScreen ? Math.min( scrollTop, adminBarHeight ) : 0;
-
-		document.body.style.setProperty( '--wp-admin--admin-bar--scroll', `${ adminBarScroll }px` );
-	};
-
-	const debounce = ( callback, wait = 100 ) => {
-		let timeoutId;
-
-		return ( ...args ) => {
-			window.clearTimeout( timeoutId );
-			timeoutId = window.setTimeout( () => callback( ...args ), wait );
-		};
-	};
-
-	const handleScrollOrResize = debounce( updateAdminBarScrolled, 100 );
-
-	window.addEventListener( 'scroll', handleScrollOrResize );
-	window.addEventListener( 'resize', handleScrollOrResize );
-
 	// Open and close navigation menu.
 	const openNavigationButton = document.querySelector( '.newspack-my-account__navigation-topbar__button .newspack-ui__button' );
 	let setButtonState;
@@ -51,7 +25,6 @@ domReady( () => {
 		openNavigationButton.addEventListener( 'click', () => {
 			const isOpen = document.body.classList.toggle( 'navigation-open' );
 			setButtonState( isOpen );
-			updateAdminBarScrolled();
 		} );
 	}
 
@@ -62,9 +35,6 @@ domReady( () => {
 			if ( setButtonState ) {
 				setButtonState( false );
 			}
-			updateAdminBarScrolled();
 		}
 	} );
-
-	updateAdminBarScrolled();
 } );