From e59da89f6a2967648593807ce0d77fa84dfaa9ea Mon Sep 17 00:00:00 2001
From: Tim Glaser <tglaser@newrelic.com>
Date: Tue, 16 Jun 2020 19:20:16 -0700
Subject: [PATCH] feat: Hide main content if mobile nav is open

---
 src/components/Layout.js       | 34 ++++++++++++++++++++++------------
 src/components/MobileHeader.js | 10 +++++-----
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/components/Layout.js b/src/components/Layout.js
index d2d0bcc42..fa7053d66 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import Footer from './Footer';
@@ -8,17 +8,27 @@ import Sidebar from './Sidebar';
 import styles from './Layout.module.scss';
 import './styles.scss';
 
-const Layout = ({ children }) => (
-  <>
-    <GlobalHeader />
-    <MobileHeader className={styles.hideOnDesktop} />
-    <div className={styles.layout}>
-      <Sidebar className={styles.hideOnMobile} />
-      <main>{children}</main>
-    </div>
-    <Footer />
-  </>
-);
+const Layout = ({ children }) => {
+  const [isMobileNavuOpen, setIsMobileNavOpen] = useState(false);
+
+  return (
+    <>
+      <GlobalHeader />
+      <MobileHeader
+        className={styles.hideOnDesktop}
+        isOpen={isMobileNavuOpen}
+        toggle={() => setIsMobileNavOpen(!isMobileNavuOpen)}
+      />
+      <div className={styles.layout}>
+        <Sidebar className={styles.hideOnMobile} />
+        <main className={isMobileNavuOpen && styles.hideOnMobile}>
+          {children}
+        </main>
+      </div>
+      <Footer />
+    </>
+  );
+};
 
 Layout.propTypes = {
   children: PropTypes.node.isRequired,
diff --git a/src/components/MobileHeader.js b/src/components/MobileHeader.js
index 5a6eaaa36..289b86f15 100644
--- a/src/components/MobileHeader.js
+++ b/src/components/MobileHeader.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
 import cx from 'classnames';
@@ -6,9 +6,7 @@ import Navigation from './Navigation';
 import HamburgerMenu from './HamburgerMenu';
 import styles from './MobileHeader.module.scss';
 
-const MobileHeader = ({ className }) => {
-  const [isOpen, setIsOpen] = useState(false);
-
+const MobileHeader = ({ className, isOpen, toggle }) => {
   return (
     <aside className={cx(styles.container, className)}>
       <div className={styles.menuBar}>
@@ -16,7 +14,7 @@ const MobileHeader = ({ className }) => {
 
         <HamburgerMenu
           className={styles.hamburgerMenu}
-          toggle={() => setIsOpen(!isOpen)}
+          toggle={toggle}
           isOpen={isOpen}
         />
       </div>
@@ -28,6 +26,8 @@ const MobileHeader = ({ className }) => {
 
 MobileHeader.propTypes = {
   className: PropTypes.string,
+  isOpen: PropTypes.bool.isRequired,
+  toggle: PropTypes.func.isRequired,
 };
 
 export default MobileHeader;