Add a JS util function to return a breakpoint value based on a CSS variable

Author: cedric07

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()
+}

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
+}

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