From 34dad51debb70725ca048af0b62e0772d4c4f1b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ce=CC=81dric=20Andrietti?= <candrietti@beapi.fr>
Date: Tue, 24 Feb 2026 12:27:29 +0100
Subject: [PATCH 1/5] Fix mobile skiplinks to focus the menu toggle and add a
 new mobile-to-desktop-nav breakpoint

---
 header.php                              |  7 +++++--
 src/scss/01-abstract/_variables.scss    |  1 +
 src/scss/04-utilities/_display.scss     | 27 +++++++++++++++++++++++++
 src/scss/08-template-parts/_header.scss |  6 +++---
 4 files changed, 36 insertions(+), 5 deletions(-)
 create mode 100644 src/scss/04-utilities/_display.scss

diff --git a/header.php b/header.php
index bb3bc5a1..d227783c 100644
--- a/header.php
+++ b/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="display-desktop-only">
 				<a href="#menu"><?php esc_html_e( 'Go to main navigation menu', 'beapi-frontend-framework' ); ?></a>
 			</li>
+			<li class="display-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>
diff --git a/src/scss/01-abstract/_variables.scss b/src/scss/01-abstract/_variables.scss
index cd5a093c..ab30e916 100644
--- a/src/scss/01-abstract/_variables.scss
+++ b/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,
 );
diff --git a/src/scss/04-utilities/_display.scss b/src/scss/04-utilities/_display.scss
new file mode 100644
index 00000000..88ac31a1
--- /dev/null
+++ b/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)
+.display-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)
+.display-desktop-only {
+	@include breakpoints(mobile-to-desktop-nav, max) {
+		@include style-only {
+			display: none !important;
+		}
+	}
+}
diff --git a/src/scss/08-template-parts/_header.scss b/src/scss/08-template-parts/_header.scss
index 988a5825..2aca294e 100644
--- a/src/scss/08-template-parts/_header.scss
+++ b/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;

From ec3c78764c9be657bc9c8e1f61e7b0be1042e92d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ce=CC=81dric=20Andrietti?= <candrietti@beapi.fr>
Date: Tue, 24 Feb 2026 12:42:28 +0100
Subject: [PATCH 2/5] Add a JS util function to return a breakpoint value based
 on a CSS variable

---
 src/js/utils/getBreakpoint.js        | 10 ++++++++++
 src/js/utils/isMobileNav.js          | 13 +++++++++++++
 src/scss/03-base/_variables-css.scss |  5 +++++
 3 files changed, 28 insertions(+)
 create mode 100644 src/js/utils/getBreakpoint.js
 create mode 100644 src/js/utils/isMobileNav.js

diff --git a/src/js/utils/getBreakpoint.js b/src/js/utils/getBreakpoint.js
new file mode 100644
index 00000000..3cc89894
--- /dev/null
+++ b/src/js/utils/getBreakpoint.js
@@ -0,0 +1,10 @@
+/**
+ * Get the breakpoint value from a CSS custom property.
+ *
+ * @param {string} breakpointVar CSS custom property name for the breakpoint.
+ * @return {string} The breakpoint value.
+ * @example getBreakpoint('--breakpoint-mobile-to-desktop-nav') => '1200'
+ */
+export default function getBreakpoint(breakpointVar = '--breakpoint-mobile-to-desktop-nav') {
+	return getComputedStyle(document.documentElement).getPropertyValue(breakpointVar).trim()
+}
diff --git a/src/js/utils/isMobileNav.js b/src/js/utils/isMobileNav.js
new file mode 100644
index 00000000..d1afe91a
--- /dev/null
+++ b/src/js/utils/isMobileNav.js
@@ -0,0 +1,13 @@
+import getBreakpoint from './getBreakpoint'
+
+/**
+ * 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 breakpoint = parseInt(getBreakpoint(breakpointVar), 10)
+	return window.matchMedia(`(max-width: ${breakpoint - 1}px)`).matches
+}
diff --git a/src/scss/03-base/_variables-css.scss b/src/scss/03-base/_variables-css.scss
index a287db1e..8b7b18f8 100644
--- a/src/scss/03-base/_variables-css.scss
+++ b/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

From 72874f44b5d86d247e7f80d48e2a78ab96b4f303 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ce=CC=81dric=20Andrietti?= <candrietti@beapi.fr>
Date: Tue, 24 Feb 2026 12:58:58 +0100
Subject: [PATCH 3/5] refactor getBreakpoint function to generic name

---
 src/js/utils/getBreakpoint.js | 10 ----------
 src/js/utils/getCssVar.js     | 18 ++++++++++++++++++
 src/js/utils/isMobileNav.js   |  4 ++--
 3 files changed, 20 insertions(+), 12 deletions(-)
 delete mode 100644 src/js/utils/getBreakpoint.js
 create mode 100644 src/js/utils/getCssVar.js

diff --git a/src/js/utils/getBreakpoint.js b/src/js/utils/getBreakpoint.js
deleted file mode 100644
index 3cc89894..00000000
--- a/src/js/utils/getBreakpoint.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Get the breakpoint value from a CSS custom property.
- *
- * @param {string} breakpointVar CSS custom property name for the breakpoint.
- * @return {string} The breakpoint value.
- * @example getBreakpoint('--breakpoint-mobile-to-desktop-nav') => '1200'
- */
-export default function getBreakpoint(breakpointVar = '--breakpoint-mobile-to-desktop-nav') {
-	return getComputedStyle(document.documentElement).getPropertyValue(breakpointVar).trim()
-}
diff --git a/src/js/utils/getCssVar.js b/src/js/utils/getCssVar.js
new file mode 100644
index 00000000..26d740c6
--- /dev/null
+++ b/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()
+}
diff --git a/src/js/utils/isMobileNav.js b/src/js/utils/isMobileNav.js
index d1afe91a..74f5e28f 100644
--- a/src/js/utils/isMobileNav.js
+++ b/src/js/utils/isMobileNav.js
@@ -1,4 +1,4 @@
-import getBreakpoint from './getBreakpoint'
+import getCssVar from './getCssVar'
 
 /**
  * Check if the current viewport is mobile based on a CSS breakpoint.
@@ -8,6 +8,6 @@ import getBreakpoint from './getBreakpoint'
  * @example isMobileNav() => true; !isMobileNav() => false
  */
 export default function isMobileNav(breakpointVar = '--breakpoint-mobile-to-desktop-nav') {
-	const breakpoint = parseInt(getBreakpoint(breakpointVar), 10)
+	const breakpoint = parseInt(getCssVar(breakpointVar), 10)
 	return window.matchMedia(`(max-width: ${breakpoint - 1}px)`).matches
 }

From c9474ad1de4d9e30a9783b0cce41fca07891185a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ce=CC=81dric=20Andrietti?= <candrietti@beapi.fr>
Date: Tue, 24 Feb 2026 13:02:24 +0100
Subject: [PATCH 4/5] Fix isMobileNav function to prevent errors

---
 src/js/utils/isMobileNav.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/js/utils/isMobileNav.js b/src/js/utils/isMobileNav.js
index 74f5e28f..ce253aa4 100644
--- a/src/js/utils/isMobileNav.js
+++ b/src/js/utils/isMobileNav.js
@@ -8,6 +8,19 @@ import getCssVar from './getCssVar'
  * @example isMobileNav() => true; !isMobileNav() => false
  */
 export default function isMobileNav(breakpointVar = '--breakpoint-mobile-to-desktop-nav') {
-	const breakpoint = parseInt(getCssVar(breakpointVar), 10)
+	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
 }

From 7fc7e77da30e6951a4354e9dc0bb64c1bc978f3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ce=CC=81dric=20Andrietti?= <candrietti@beapi.fr>
Date: Wed, 25 Feb 2026 09:51:28 +0100
Subject: [PATCH 5/5] fix display css utilities classes

---
 header.php                          | 4 ++--
 src/scss/04-utilities/_display.scss | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/header.php b/header.php
index d227783c..2710c17e 100644
--- a/header.php
+++ b/header.php
@@ -27,10 +27,10 @@
 	<?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 class="display-desktop-only">
+			<li class="is-desktop-only">
 				<a href="#menu"><?php esc_html_e( 'Go to main navigation menu', 'beapi-frontend-framework' ); ?></a>
 			</li>
-			<li class="display-mobile-only">
+			<li class="is-mobile-only">
 				<a href="#menu-toggle"><?php esc_html_e( 'Go to main navigation menu', 'beapi-frontend-framework' ); ?></a>
 			</li>
 			<li>
diff --git a/src/scss/04-utilities/_display.scss b/src/scss/04-utilities/_display.scss
index 88ac31a1..24e87949 100644
--- a/src/scss/04-utilities/_display.scss
+++ b/src/scss/04-utilities/_display.scss
@@ -9,7 +9,7 @@
  */
 
 // Visible only on mobile (below mobile-to-desktop-nav breakpoint)
-.display-mobile-only {
+.is-mobile-only {
 	@include breakpoints(mobile-to-desktop-nav) {
 		@include style-only {
 			display: none !important;
@@ -18,7 +18,7 @@
 }
 
 // Visible only on desktop (at or above mobile-to-desktop-nav breakpoint)
-.display-desktop-only {
+.is-desktop-only {
 	@include breakpoints(mobile-to-desktop-nav, max) {
 		@include style-only {
 			display: none !important;