feat: Hide main content if mobile nav is open

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,

src/components/MobileHeader.js

@@ -1,22 +1,20 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
 import cx from 'classnames';
 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}>
         <Link to="/" className={styles.logo} />
 
         <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;