Merge pull request #473 from BeAPI/fix/skip-links-mobile

Fix/skip links mobile

Author: cedric07

header.php

@@ -27,9 +27,12 @@
 	<?php wp_body_open(); ?>
 	<nav class="skip-links skip-links--hidden" aria-label="<?php esc_attr_e( 'Fast access links', 'beapi-frontend-framework' ); ?>">
 		<ul>
-			<li>
+			<li class="is-desktop-only">
 				<a href="#menu"><?php esc_html_e( 'Go to main navigation menu', 'beapi-frontend-framework' ); ?></a>
 			</li>
+			<li class="is-mobile-only">
+				<a href="#menu-toggle"><?php esc_html_e( 'Go to main navigation menu', 'beapi-frontend-framework' ); ?></a>
+			</li>
 			<li>
 				<a href="#content"><?php esc_html_e( 'Go to main content', 'beapi-frontend-framework' ); ?></a>
 			</li>
@@ -46,7 +49,7 @@
 					<span class="sr-only"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></span>
 				</a>
 				<?php if ( has_nav_menu( 'menu-main' ) ) : ?>
-					<button class="header__menu-toggle" aria-expanded="false" aria-controls="menu">
+					<button id="menu-toggle" class="header__menu-toggle" aria-expanded="false" aria-controls="menu">
 						<span></span>
 						<span class="sr-only aria-expanded-false-text"><?php esc_html_e( 'Open the menu', 'beapi-frontend-framework' ); ?></span>
 						<span class="sr-only aria-expanded-true-text"><?php esc_html_e( 'Close the menu', 'beapi-frontend-framework' ); ?></span>

src/js/utils/getCssVar.js

@@ -0,0 +1,18 @@
+/**
+ * Get the value from a CSS custom property.
+ *
+ * @param {string} name CSS custom property name (ex: '--breakpoint-mobile-to-desktop-nav').
+ * @param {HTMLElement} element The element to get the CSS custom property from.
+ * @return {string} The value.
+ * @example getCssVar('--breakpoint-mobile-to-desktop-nav') => '1200'
+ */
+export default function getCssVar(name, element = document.documentElement) {
+	if (!name) {
+		console.warn('getCssVar: No name provided.')
+		return ''
+	}
+
+	const propName = name.startsWith('--') ? name : `--${name}`
+
+	return getComputedStyle(element).getPropertyValue(propName).trim()
+}

src/js/utils/isMobileNav.js

@@ -0,0 +1,26 @@
+import getCssVar from './getCssVar'
+
+/**
+ * Check if the current viewport is mobile based on a CSS breakpoint.
+ *
+ * @param {string} breakpointVar CSS custom property name for the breakpoint.
+ * @return {boolean} True if viewport is mobile, false otherwise.
+ * @example isMobileNav() => true; !isMobileNav() => false
+ */
+export default function isMobileNav(breakpointVar = '--breakpoint-mobile-to-desktop-nav') {
+	const rawValue = getCssVar(breakpointVar)
+
+	if (!rawValue) {
+		console.warn(`isMobileNav: Variable ${breakpointVar} is empty or undefined. Returning false.`)
+		return false
+	}
+
+	const breakpoint = parseInt(rawValue, 10)
+
+	if (isNaN(breakpoint)) {
+		console.warn(`isMobileNav: Could not parse "${rawValue}" as a number.`)
+		return false
+	}
+
+	return window.matchMedia(`(max-width: ${breakpoint - 1}px)`).matches
+}

src/scss/01-abstract/_variables.scss

@@ -53,6 +53,7 @@ $breakpoints: (
 	admin-bar: 784, // admin bar height change
 	m: 960,
 	md: 1080,
+	mobile-to-desktop-nav: 1200,
 	mdl: 1279, // Do not use 1280px, it causes a bug under Window Edge with a device pixel ratio higher than 1
 	l: 1440,
 );

src/scss/03-base/_variables-css.scss

@@ -5,6 +5,11 @@
 
 :root {
 	/*
+	* Breakpoints
+	*/
+	--breakpoint-mobile-to-desktop-nav: #{map-get($breakpoints, mobile-to-desktop-nav)}; // Used by JavaScript
+
+	/*
      * Heading
      */
 	// Font size

src/scss/04-utilities/_display.scss

@@ -0,0 +1,27 @@
+@use "../02-tools/m-breakpoint" as *;
+@use "../02-tools/m-style-only" as *;
+
+/**
+ * Display utilities
+ *
+ * Utility classes for showing/hiding elements based on the mobile-to-desktop-nav breakpoint.
+ * Used primarily for skip links and navigation-related elements.
+ */
+
+// Visible only on mobile (below mobile-to-desktop-nav breakpoint)
+.is-mobile-only {
+	@include breakpoints(mobile-to-desktop-nav) {
+		@include style-only {
+			display: none !important;
+		}
+	}
+}
+
+// Visible only on desktop (at or above mobile-to-desktop-nav breakpoint)
+.is-desktop-only {
+	@include breakpoints(mobile-to-desktop-nav, max) {
+		@include style-only {
+			display: none !important;
+		}
+	}
+}

src/scss/08-template-parts/_header.scss

@@ -180,7 +180,7 @@
 		}
 	}
 
-	@include breakpoints(mdl, max) {
+	@include breakpoints(mobile-to-desktop-nav, max) {
 		&__menu {
 			position: absolute;
 			top: 0;
@@ -229,7 +229,7 @@
 		}
 	}
 
-	@include breakpoints(sm, mdl) {
+	@include breakpoints(sm, mobile-to-desktop-nav) {
 		#{$el}__menu {
 			right: 0;
 			left: auto;
@@ -248,7 +248,7 @@
 		}
 	}
 
-	@include breakpoints(mdl) {
+	@include breakpoints(mobile-to-desktop-nav) {
 		.container {
 			display: flex;
 			align-items: flex-start;