feat: Show nav on menu click

newrelic · Jun 17, 2020 · 6e51a4e · 6e51a4e
1 parent d24518e
commit 6e51a4e
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 12 deletions.
diff --git 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
@@ -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
@@ -4,21 +4,23 @@ 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>
   );
 };
 
 Navigation.propTypes = {
   className: PropTypes.string,
-  pages: PropTypes.arrayOf(link).isRequired,
 };
 
 export default Navigation;