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;