Adding jambonz-ui useMobileMedia custom hook

components/jambonz-ui.js

@@ -2,9 +2,11 @@ import Link from 'next/link';
 import classNames from 'classnames';
 import * as Icons from 'react-feather';
 import { nanoid } from 'nanoid';
+import { mobileMedia } from '../lib/vars';
+import { useState, useEffect } from 'react';
 
+// Normalize how we work with the subtext as an array[]
 export function normalizeSubtext(subtext) {
-  // Normalize how we work with the subtext as an array[]
   if (!Array.isArray(subtext)) {
     subtext = [subtext];
   }
@@ -12,6 +14,29 @@ export function normalizeSubtext(subtext) {
   return subtext;
 }
 
+// Normalize how we listen for mobile media queries
+export function useMobileMedia() {
+  const [mobile, setMobile] = useState(false);
+
+  const handleMedia = (e) => {
+    setMobile(e.matches);
+  };
+
+  useEffect(() => {
+    const mql = window.matchMedia(mobileMedia);
+
+    mql.addListener(handleMedia);
+
+    setMobile(mql.matches);
+
+    return function cleanup() {
+      mql.removeListener(handleMedia);
+    }
+  }, [handleMedia, setMobile]);
+
+  return mobile;
+}
+
 export function H1({ children }) {
   return <div className="h1">{children}</div>;
 }

components/navi.js

@@ -2,8 +2,8 @@ import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import classNames from 'classnames';
-import { Button, Icon } from './jambonz-ui';
-import { homeObj, mobileMedia } from '../lib/vars';
+import { Button, Icon, useMobileMedia } from './jambonz-ui';
+import { homeObj } from '../lib/vars';
 import { nanoid } from 'nanoid';
 
 function NaviItem({obj}) {
@@ -66,32 +66,16 @@ function NaviMobile({ active, handler, siteData }) {
 
 export default function Navi({ siteData }) {
   const [active, setActive] = useState(false);
-  const [mobile, setMobile] = useState(false);
+  const mobile = useMobileMedia();
 
   const handleNavi = () => {
     setActive(!active);
   };
 
-  const handleMedia = (e) => {
-    setMobile(e.matches);
-    
-    // Make sure mobile navi is closed on resizes...
-    if (!e.matches && active) {
-      setActive(false);
-    }
-  };
-
-  useEffect(() => {
-    const mql = window.matchMedia(mobileMedia);
-
-    mql.addListener(handleMedia);
-
-    setMobile(mql.matches);
-
-    return function cleanup() {
-      mql.removeListener(handleMedia);
-    }
-  }, [handleMedia, setMobile]);
+  // Make sure mobile navi is closed on resizes...
+  if (!mobile && active) {
+    setActive(false);
+  }
 
   return (
     <nav className="navi">