From 885805a851cfa368106623d9791e9b39edd34e41 Mon Sep 17 00:00:00 2001
From: kitajchuk <bk@kitajchuk.com>
Date: Fri, 20 May 2022 20:48:03 -0700
Subject: [PATCH] fix cumulative layout shift

---
 src/components/jambonz-ui.js | 20 ++++++--------------
 src/styles/_navi.scss        | 10 ++++++----
 src/styles/_vars.scss        | 10 ++++++++++
 3 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/jambonz-ui.js b/src/components/jambonz-ui.js
index 294168e..35572a4 100644
--- a/src/components/jambonz-ui.js
+++ b/src/components/jambonz-ui.js
@@ -30,13 +30,8 @@ export function normalizeTextLayout(html) {
     });
 }
 
-// Normalize how we listen for media queries
-// Intentionally `null` default value -- will throw Error
-export function useMatchMedia(mediaQuery = null) {
-  if (!mediaQuery) {
-    throw new Error(`Jambonz UI "useMatchMedia" requires valid Media Query: ${mediaQuery} was passed.`);
-  }
-
+// Normalize for our mobile media query
+export function useMobileMedia() {
   const [mobile, setMobile] = useState(false);
 
   const handleMedia = useCallback((e) => {
@@ -44,7 +39,9 @@ export function useMatchMedia(mediaQuery = null) {
   }, [setMobile]);
 
   useEffect(() => {
-    const mql = window.matchMedia(mediaQuery);
+    const str = window.getComputedStyle(document.documentElement);
+    const qry = str.getPropertyValue('--mobile-media');
+    const mql = window.matchMedia(`(max-width: ${qry})`);
 
     mql.addEventListener('change', handleMedia);
 
@@ -53,16 +50,11 @@ export function useMatchMedia(mediaQuery = null) {
     return function cleanup() {
       mql.removeEventListener('change', handleMedia);
     };
-  }, [handleMedia, setMobile, mediaQuery]);
+  }, [handleMedia, setMobile]);
 
   return mobile;
 }
 
-// Normalize for our mobile media query
-export function useMobileMedia() {
-  return useMatchMedia('(max-width: 896px)');
-}
-
 export function H1({ children, ...rest }) {
   return <h1 {...rest}>{children}</h1>;
 }
diff --git a/src/styles/_navi.scss b/src/styles/_navi.scss
index 508525d..a926d12 100644
--- a/src/styles/_navi.scss
+++ b/src/styles/_navi.scss
@@ -3,8 +3,10 @@
   position: relative;
   z-index: $navi-index;
 
-  &.mobile.active {
-    z-index: $navi-index + 2;
+  &.active {
+    @media ( max-width: $mobile-width ) {
+      z-index: $navi-index + 2;
+    }
   }
 
   // Menu / X icons for mobile nav interactions
@@ -47,7 +49,7 @@
 
   &__links,
   &__login {
-    .mobile & {
+    @media ( max-width: $mobile-width ) {
       display: none;
     }
   }
@@ -61,7 +63,7 @@
       transform: translateY(-5px);
     }
 
-    .mobile & {
+    @media ( max-width: $mobile-width ) {
       display: block;
     }
   }
diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss
index 3c39c73..65b635d 100644
--- a/src/styles/_vars.scss
+++ b/src/styles/_vars.scss
@@ -1,3 +1,13 @@
+/******************************************************************************
+ * Special mobile layout width
+ * Utilized in src/components/jambonz-ui: useMobileMedia
+*******************************************************************************/
+:root {
+  --mobile-media: 896px;
+}
+
+$mobile-width: 896px;
+
 /******************************************************************************
  * Colors
 *******************************************************************************/