From f232e0ab986b89bfed6940e270cb70ab5be0c108 Mon Sep 17 00:00:00 2001
From: Tim Glaser <tglaser@newrelic.com>
Date: Tue, 16 Jun 2020 18:32:03 -0700
Subject: [PATCH] feat: Responsive nav

---
 src/components/GlobalHeader.module.scss |  2 +-
 src/components/Layout.js                |  5 +-
 src/components/Layout.module.scss       | 16 +++--
 src/components/MobileHeader.js          | 19 +++++
 src/components/MobileHeader.module.scss | 17 +++++
 src/components/Navigation.js            | 66 ++++++++++++++++++
 src/components/Navigation.module.scss   | 75 ++++++++++++++++++++
 src/components/Sidebar.js               | 55 ++-------------
 src/components/Sidebar.module.scss      | 92 +++----------------------
 9 files changed, 207 insertions(+), 140 deletions(-)
 create mode 100644 src/components/MobileHeader.js
 create mode 100644 src/components/MobileHeader.module.scss
 create mode 100644 src/components/Navigation.js
 create mode 100644 src/components/Navigation.module.scss

diff --git a/src/components/GlobalHeader.module.scss b/src/components/GlobalHeader.module.scss
index 5978ba7e3..8f1bd2fdf 100644
--- a/src/components/GlobalHeader.module.scss
+++ b/src/components/GlobalHeader.module.scss
@@ -124,7 +124,7 @@
 
 @media screen and (max-width: 1240px) {
   .global-header-container {
-    padding: 0 1rem;
+    padding: 0 1.75rem;
   }
 }
 
diff --git a/src/components/Layout.js b/src/components/Layout.js
index 857496e05..d2d0bcc42 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -3,16 +3,17 @@ import PropTypes from 'prop-types';
 
 import Footer from './Footer';
 import GlobalHeader from './GlobalHeader';
+import MobileHeader from './MobileHeader';
 import Sidebar from './Sidebar';
 import styles from './Layout.module.scss';
-import pages from '../data/sidenav.json';
 import './styles.scss';
 
 const Layout = ({ children }) => (
   <>
     <GlobalHeader />
+    <MobileHeader className={styles.hideOnDesktop} />
     <div className={styles.layout}>
-      <Sidebar className={styles.sidebar} pages={pages} />
+      <Sidebar className={styles.hideOnMobile} />
       <main>{children}</main>
     </div>
     <Footer />
diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
index ee84aaee6..9531c9ef9 100644
--- a/src/components/Layout.module.scss
+++ b/src/components/Layout.module.scss
@@ -12,10 +12,6 @@
   .layout {
     display: block;
   }
-
-  .sidebar {
-    display: none;
-  }
 }
 
 @media screen and (max-width: 1240px) {
@@ -24,3 +20,15 @@
     padding-right: 1rem;
   }
 }
+
+.hideOnDesktop {
+  @media (min-width: 760px) {
+    display: none;
+  }
+}
+
+.hideOnMobile {
+  @media (max-width: 760px) {
+    display: none;
+  }
+}
diff --git a/src/components/MobileHeader.js b/src/components/MobileHeader.js
new file mode 100644
index 000000000..2ce030183
--- /dev/null
+++ b/src/components/MobileHeader.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'gatsby';
+import cx from 'classnames';
+import Navigation from './Navigation';
+import styles from './MobileHeader.module.scss';
+
+const MobileHeader = ({ className }) => (
+  <aside className={cx(styles.container, className)}>
+    <Link to="/" className={styles.logo} />
+    {/* <Navigation /> */}
+  </aside>
+);
+
+MobileHeader.propTypes = {
+  className: PropTypes.string,
+};
+
+export default MobileHeader;
diff --git a/src/components/MobileHeader.module.scss b/src/components/MobileHeader.module.scss
new file mode 100644
index 000000000..90dcc9560
--- /dev/null
+++ b/src/components/MobileHeader.module.scss
@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 60px;
+  padding: 0 1rem;
+  border-bottom: 1px solid var(--color-neutrals-100);
+}
+
+.logo {
+  width: 160px;
+  height: 34px;
+  background-size: 160px 34px;
+  background-repeat: no-repeat;
+  display: inline-block;
+  background-image: url('../images/developers-logo.svg');
+}
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
new file mode 100644
index 000000000..0a6afacba
--- /dev/null
+++ b/src/components/Navigation.js
@@ -0,0 +1,66 @@
+import React, { useState, useContext } from 'react';
+import PropTypes from 'prop-types';
+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 = () => {
+  return (
+    <nav className={styles.container} 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;
+
+// recursively create navigation
+const renderNav = (pages, depthLevel = 0) => {
+  return pages.map((page, index) => {
+    const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
+    const [isDisplay, setIsDisplay] = useState(
+      crumbs.length === depthLevel || crumbs.includes(page.displayName)
+    );
+    const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
+
+    const display = page.url ? (
+      <Link to={page.url}>{page.displayName}</Link>
+    ) : (
+      <div
+        role="button"
+        onClick={() => setIsDisplay(!isDisplay)}
+        onKeyPress={() => setIsDisplay(!isDisplay)}
+        tabIndex={0}
+      >
+        {page.displayName}
+      </div>
+    );
+    let subNav;
+
+    if (page.children) {
+      subNav = renderNav(page.children, depthLevel + 1);
+    }
+    return (
+      <li
+        className={cx(styles[`navDepth${depthLevel}`], {
+          [styles.isCurrentPage]: isCurrentPage,
+        })}
+        key={index}
+      >
+        {display}
+        <ul className={cx(styles.nestedNav, { [styles.isDisplay]: isDisplay })}>
+          {subNav}
+        </ul>
+      </li>
+    );
+  });
+};
diff --git a/src/components/Navigation.module.scss b/src/components/Navigation.module.scss
new file mode 100644
index 000000000..4393fd6fe
--- /dev/null
+++ b/src/components/Navigation.module.scss
@@ -0,0 +1,75 @@
+.container {
+  font-size: 0.875rem;
+
+  ul {
+    margin: 0;
+    padding-left: 1rem;
+    list-style: none;
+  }
+
+  a {
+    color: var(--color-black);
+  }
+
+  // remove?
+  button {
+    background: none;
+    border: 0;
+    cursor: pointer;
+    width: 3rem;
+    display: none;
+  }
+
+  nav {
+    margin-top: 1rem;
+  }
+}
+
+.nestedNav {
+  display: none;
+}
+
+.isDisplay {
+  display: block;
+}
+
+.listNav {
+  ul {
+    padding-left: 1rem;
+  }
+}
+
+.navDepth0 {
+  color: var(--color-black);
+  font-weight: bold;
+  div {
+    margin: 1rem 0;
+  }
+  li {
+    margin: 1rem 0;
+  }
+}
+
+.navDepth1 {
+  font-weight: normal;
+  ul {
+    padding-left: 0.2rem;
+  }
+}
+
+.navDepth2 {
+  font-weight: bold;
+  text-transform: uppercase;
+  color: var(--color-neutrals-600);
+  font-size: 14px;
+}
+
+.navDepth3 {
+  font-weight: normal;
+  text-transform: initial;
+  color: var(--color-black);
+}
+
+.isCurrentPage {
+  font-weight: bold;
+}
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
index dd1f4a5cf..cd0e48f66 100644
--- a/src/components/Sidebar.js
+++ b/src/components/Sidebar.js
@@ -1,66 +1,19 @@
-import React, { useState, useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
 import cx from 'classnames';
-import { BreadcrumbContext } from './BreadcrumbContext';
-
-import { link } from '../types';
+import Navigation from './Navigation';
 import styles from './Sidebar.module.scss';
 
-// recursively create navigation
-const renderNav = (pages, depthLevel = 0) => {
-  return pages.map((page, index) => {
-    const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
-    const [isDisplay, setIsDisplay] = useState(
-      crumbs.length === depthLevel || crumbs.includes(page.displayName)
-    );
-    const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
-
-    const display = page.url ? (
-      <Link to={page.url}>{page.displayName}</Link>
-    ) : (
-      <div
-        role="button"
-        onClick={() => setIsDisplay(!isDisplay)}
-        onKeyPress={() => setIsDisplay(!isDisplay)}
-        tabIndex={0}
-      >
-        {page.displayName}
-      </div>
-    );
-    let subNav;
-
-    if (page.children) {
-      subNav = renderNav(page.children, depthLevel + 1);
-    }
-    return (
-      <li
-        className={cx(styles[`navDepth${depthLevel}`], {
-          [styles.isCurrentPage]: isCurrentPage,
-        })}
-        key={index}
-      >
-        {display}
-        <ul className={cx(styles.nestedNav, { [styles.isDisplay]: isDisplay })}>
-          {subNav}
-        </ul>
-      </li>
-    );
-  });
-};
-
-const Sidebar = ({ className, pages }) => (
+const Sidebar = ({ className }) => (
   <aside className={cx(styles.sidebar, className)}>
     <Link to="/" className={styles.logo} />
-    <nav role="navigation" aria-label="Sidebar">
-      <ul className={styles.listNav}>{renderNav(pages)}</ul>
-    </nav>
+    <Navigation />
   </aside>
 );
 
 Sidebar.propTypes = {
   className: PropTypes.string,
-  pages: PropTypes.arrayOf(link).isRequired,
 };
 
 export default Sidebar;
diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss
index 61aa37390..5d977842d 100644
--- a/src/components/Sidebar.module.scss
+++ b/src/components/Sidebar.module.scss
@@ -1,95 +1,23 @@
-.sidebar {
-  font-size: 0.875rem;
-
-  ul {
-    margin: 0;
-    padding-left: 1rem;
-    list-style: none;
-  }
-
-  a {
-    text-decoration: none;
-    color: var(--color-black);
-    display: inline-block;
-  }
-
-  h3 {
-    margin: 0;
-  }
-
-  button {
-    background: none;
-    border: 0;
-    cursor: pointer;
-    width: 3rem;
-    display: none;
-  }
-
-  nav {
-    margin-top: 1rem;
-  }
-}
-
-.top {
-  display: flex;
-  justify-content: space-between;
-}
-
 .logo {
   padding: 0;
   background-size: contain;
   background-repeat: no-repeat;
   width: 247px;
   height: 64px;
-  margin-right: 1rem;
+  margin-bottom: 1rem;
+  display: inline-block;
   background-image: url('../images/developers-logo.svg');
 }
 
-.nestedNav {
-  display: none;
-}
-
-.isDisplay {
-  display: block;
-}
-
-.listNav {
-  ul {
-    padding-left: 1rem;
-  }
-}
-
-.navDepth0 {
-  color: var(--color-black);
-  font-weight: bold;
-  div {
-    margin: 1rem 0;
-  }
-  li {
-    margin: 1rem 0;
+@media screen and (max-width: 760px) {
+  .sidebar {
+    height: 60px;
+    border-bottom: 1px solid var(--color-neutrals-100);
   }
-}
 
-.navDepth1 {
-  font-weight: normal;
-  ul {
-    padding-left: 0.2rem;
+  .logo {
+    width: 160px;
+    height: 34px;
+    background-size: 160px 34px;
   }
 }
-
-.navDepth2 {
-  font-weight: bold;
-  text-transform: uppercase;
-  color: var(--color-neutrals-600);
-  font-size: 14px;
-}
-
-.navDepth3 {
-  font-weight: normal;
-  text-transform: initial;
-  color: var(--color-black);
-}
-
-.isCurrentPage {
-  font-weight: bold;
-}