From 6e51a4e88ebaab0d35d82cb795b7ebe0bc188fb8 Mon Sep 17 00:00:00 2001
From: Tim Glaser <tglaser@newrelic.com>
Date: Tue, 16 Jun 2020 19:10:42 -0700
Subject: [PATCH] feat: Show nav on menu click

---
 src/components/MobileHeader.js          | 16 +++++++++-------
 src/components/MobileHeader.module.scss | 15 ++++++++++++++-
 src/components/Navigation.js            | 10 ++++++----
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/components/MobileHeader.js b/src/components/MobileHeader.js
index b05025019..5a6eaaa36 100644
--- a/src/components/MobileHeader.js
+++ b/src/components/MobileHeader.js
@@ -11,15 +11,17 @@ const MobileHeader = ({ className }) => {
 
   return (
     <aside className={cx(styles.container, className)}>
-      <Link to="/" className={styles.logo} />
+      <div className={styles.menuBar}>
+        <Link to="/" className={styles.logo} />
 
-      <HamburgerMenu
-        className={styles.hamburgerMenu}
-        toggle={() => setIsOpen(!isOpen)}
-        isOpen={isOpen}
-      />
+        <HamburgerMenu
+          className={styles.hamburgerMenu}
+          toggle={() => setIsOpen(!isOpen)}
+          isOpen={isOpen}
+        />
+      </div>
 
-      {/* <Navigation /> */}
+      {isOpen && <Navigation className={styles.navigation} />}
     </aside>
   );
 };
diff --git a/src/components/MobileHeader.module.scss b/src/components/MobileHeader.module.scss
index 90dcc9560..c10cc3356 100644
--- a/src/components/MobileHeader.module.scss
+++ b/src/components/MobileHeader.module.scss
@@ -1,10 +1,14 @@
 .container {
+  position: relative;
+  border-bottom: 1px solid var(--color-neutrals-100);
+}
+
+.menuBar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 60px;
   padding: 0 1rem;
-  border-bottom: 1px solid var(--color-neutrals-100);
 }
 
 .logo {
@@ -15,3 +19,12 @@
   display: inline-block;
   background-image: url('../images/developers-logo.svg');
 }
+
+.navigation {
+  font-size: 1rem;
+  padding: 1.5rem 3rem;
+  position: absolute;
+  width: 100vw;
+  height: calc(100vh - 90px); // todo grab height values from vars
+  background-color: var(--color-white);
+}
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index 0a6afacba..6c1633a86 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -4,13 +4,16 @@ import { Link } from 'gatsby';
 import cx from 'classnames';
 import { BreadcrumbContext } from './BreadcrumbContext';
 import pages from '../data/sidenav.json';
-import { link } from '../types';
 
 import styles from './Navigation.module.scss';
 
-const Navigation = () => {
+const Navigation = ({ className }) => {
   return (
-    <nav className={styles.container} role="navigation" aria-label="Navigation">
+    <nav
+      className={cx(styles.container, className)}
+      role="navigation"
+      aria-label="Navigation"
+    >
       <ul className={styles.listNav}>{renderNav(pages)}</ul>
     </nav>
   );
@@ -18,7 +21,6 @@ const Navigation = () => {
 
 Navigation.propTypes = {
   className: PropTypes.string,
-  pages: PropTypes.arrayOf(link).isRequired,
 };
 
 export default Navigation;