From d39a0e6fe12b64e4dfbf34d4a85318b685d027a9 Mon Sep 17 00:00:00 2001
From: kitajchuk <bk@kitajchuk.com>
Date: Thu, 1 Apr 2021 10:21:01 -0700
Subject: [PATCH] Match media for responsive mobile navi

---
 components/navi.js | 13 +++----------
 lib/vars.js        |  6 ++++++
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/components/navi.js b/components/navi.js
index f81bfa9..fb0f68a 100644
--- a/components/navi.js
+++ b/components/navi.js
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import classNames from 'classnames';
 import { Button, Icon } from './jambonz-ui';
-// import { mobileMedia } from '../lib/vars';
+import { homeObj, mobileMedia } from '../lib/vars';
 
 function NaviItem({obj}) {
   const router = useRouter();
@@ -30,10 +30,6 @@ function NaviMobile({ active, handler, siteData }) {
     'navi__mobile': true,
     'active': active,
   };
-  const homeObj = {
-    link: '/',
-    label: 'Home',
-  };
 
   return (
     <div className={classNames(classes)}>
@@ -65,14 +61,12 @@ function NaviMobile({ active, handler, siteData }) {
 
 export default function Navi({ siteData }) {
   const [active, setActive] = useState(false);
+  const [mobile, setMobile] = useState(false);
 
   const handleNavi = () => {
     setActive(!active);
   };
 
-  /* Example of matchMedia for responsive component...
-  const [mobile, setMobile] = useState(false);
-
   const handleMedia = (e) => {
     setMobile(e.matches);
     
@@ -93,7 +87,6 @@ export default function Navi({ siteData }) {
       mql.removeListener(handleMedia);
     }
   }, [handleMedia, setMobile]);
-  */
 
   return (
     <nav className="navi">
@@ -115,7 +108,7 @@ export default function Navi({ siteData }) {
           <Button href={siteData.navi.login.link} style="login">{siteData.navi.login.label}</Button>
         </div>
       </div>
-      <NaviMobile active={active} handler={handleNavi} siteData={siteData} />
+      {mobile && <NaviMobile active={active} handler={handleNavi} siteData={siteData} />}
     </nav>
   );
 }
\ No newline at end of file
diff --git a/lib/vars.js b/lib/vars.js
index 68ab1b6..9cdf269 100644
--- a/lib/vars.js
+++ b/lib/vars.js
@@ -1,5 +1,11 @@
 const mobileMedia = '(max-width: 768px)';
 
+const homeObj = {
+  link: '/',
+  label: 'Home',
+};
+
 export {
+  homeObj,
   mobileMedia,
 }
\ No newline at end of file