refactor getBreakpoint function to generic name

Author: cedric07

src/js/utils/getBreakpoint.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/getCssVar.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
 }