Merge pull request #12 from newrelic/zstickles/responsive-header

Header Component (initial responsive styles)

package.json

@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.1.0",
   "dependencies": {
+    "classnames": "^2.2.6",
     "gatsby": "^2.20.25",
     "gatsby-image": "^2.3.4",
     "gatsby-plugin-manifest": "^2.3.5",

src/components/HamburgerMenu.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import './HamburgerMenu.scss';
+
+const HamburgerMenu = ({ toggle, open }) => (
+  <button
+    aria-expanded={open}
+    aria-label="Mobile Menu"
+    type="button"
+    className={cx('HamburgerMenu', { HamburgerMenu__open: open })}
+    onClick={() => toggle()}
+  >
+    <div />
+    <div />
+    <div />
+  </button>
+);
+
+HamburgerMenu.propTypes = {
+  toggle: PropTypes.func.isRequired,
+  open: PropTypes.bool,
+};
+
+HamburgerMenu.defaultProps = {
+  open: false,
+};
+
+export default HamburgerMenu;

src/components/HamburgerMenu.scss

@@ -0,0 +1,29 @@
+button.HamburgerMenu {
+  background: none;
+  border: 0;
+  cursor: pointer;
+  width: 3rem;
+
+  div {
+    width: 100%;
+    height: 4px;
+    background-color: var(--color-black);
+    margin: 5px 0;
+    border-radius: 2px;
+    transition: 0.18s;
+  }
+
+  &.HamburgerMenu__open {
+    :nth-child(1) {
+      transform: rotate(-45deg) translate(-6px, 6px);
+    }
+
+    :nth-child(2) {
+      opacity: 0;
+    }
+
+    :nth-child(3) {
+      transform: rotate(45deg) translate(-6px, -6px);
+    }
+  }
+}

src/components/Header.js

@@ -1,13 +1,17 @@
-import './Header.scss';
-
-import { Link, graphql, useStaticQuery } from 'gatsby';
+import { Link, useStaticQuery, graphql } from 'gatsby';
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
 
 import Container from './Container';
 import ExternalLink from './ExternalLink';
-import PropTypes from 'prop-types';
-import React from 'react';
+import HamburgerMenu from './HamburgerMenu';
+
+import './Header.scss';
 
 const Header = ({ pages }) => {
+  const [menuOpen, setMenuOpen] = useState(false);
+
   // NOTE: we may want to abstract this
   const data = useStaticQuery(graphql`
     query {
@@ -29,48 +33,46 @@ const Header = ({ pages }) => {
   `);
 
   return (
-    <header className="Header--main">
+    <header
+      className={cx('Header--main', { 'Header--main__menuOpen': menuOpen })}
+    >
       <Container>
-        <div className="Header-topBar">
-          <nav role="navigation" aria-label="New Relic" className="nav--nr">
-            <ul>
-              <li>
-                <ExternalLink href="//newrelic.com">
-                  <img src={data.nrLogo.childImageSharp.fixed.src} />
-                </ExternalLink>
-              </li>
-              <li>
-                <Link to="/">Developers</Link>
-              </li>
-              <li>
-                <ExternalLink href="//opensource.newrelic.com">
-                  Open Source
-                </ExternalLink>
-              </li>
-              <li>
-                <ExternalLink href="//docs.newrelic.com">
-                  Documentation
-                </ExternalLink>
-              </li>
-            </ul>
-          </nav>
-
-          <nav className="nav--user">
-            <ul>
-              <li>
-                <ExternalLink href="//github.com/newrelic">
-                  <img src={data.ghLogo.childImageSharp.fixed.src} />
-                </ExternalLink>
-              </li>
-            </ul>
-          </nav>
-        </div>
+        <nav
+          role="navigation"
+          aria-label="New Relic"
+          className="Header-nav--nr"
+        >
+          <h3 className="u-hideOnDesktop">Sites</h3>
+          <ul>
+            <li className="u-hideOnMobile">
+              <ExternalLink href="//newrelic.com">
+                <img src={data.nrLogo.childImageSharp.fixed.src} />
+              </ExternalLink>
+            </li>
+            <li>
+              <Link to="/">Developers</Link>
+            </li>
+            <li>
+              <ExternalLink href="//opensource.newrelic.com">
+                Open Source
+              </ExternalLink>
+            </li>
+            <li>
+              <ExternalLink href="//docs.newrelic.com">
+                Documentation
+              </ExternalLink>
+            </li>
+          </ul>
+        </nav>
 
-        <h1>
+        <h1 className="Header-title">
           <Link to="/">{'</>'} New Relic Developers</Link>
         </h1>
 
-        <nav role="navigation" aria-label="Main" className="nav--main">
+        <HamburgerMenu toggle={() => setMenuOpen(!menuOpen)} open={menuOpen} />
+
+        <nav role="navigation" aria-label="Main" className="Header-nav--main">
+          <h3 className="u-hideOnDesktop">Developers</h3>
           <ul>
             {pages.map((page, i) => (
               <li key={i}>
@@ -79,6 +81,18 @@ const Header = ({ pages }) => {
             ))}
           </ul>
         </nav>
+
+        <nav className="Header-nav--tools">
+          <h3 className="u-hideOnDesktop">Tools</h3>
+          <ul>
+            <li>
+              <ExternalLink href="//github.com/newrelic">
+                <img src={data.ghLogo.childImageSharp.fixed.src} />
+                <span className="u-hideOnDesktop">Contribute on GitHub</span>
+              </ExternalLink>
+            </li>
+          </ul>
+        </nav>
       </Container>
     </header>
   );

src/components/Header.scss

@@ -1,21 +1,85 @@
 header.Header--main {
   background-color: #d7e6e8;
 
-  a {
-    color: #000;
-    text-decoration: none;
+  .u-container {
+    display: grid;
+    grid-template-areas: 'nr tools' 'title title' 'main main';
+
+    @media (max-width: 760px) {
+      grid-template-columns: 1fr 3rem;
+      grid-template-areas: 'title menu' 'nr nr' 'main main' 'tools tools';
+    }
   }
 
-  h1 {
+  .Header-title {
+    grid-area: title;
     font-size: 1.8rem;
     margin: 0;
 
     a {
       padding-left: 0;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+    @media (max-width: 760px) {
+      a {
+        padding-left: 1rem;
+      }
     }
   }
 
-  nav > ul {
+  .HamburgerMenu {
+    display: none;
+    grid-area: menu;
+    align-items: end;
+
+    @media (max-width: 760px) {
+      display: block;
+    }
+  }
+
+  .Header-nav--nr {
+    grid-area: nr;
+  }
+
+  .Header-nav--tools {
+    grid-area: tools;
+
+    ul {
+      justify-content: flex-end;
+    }
+  }
+
+  .Header-nav--main {
+    grid-area: main;
+
+    ul {
+      justify-content: flex-end;
+    }
+  }
+
+  a {
+    color: #000;
+    text-decoration: none;
+    padding: 0.6rem;
+    display: inline-block;
+    display: flex;
+
+    &:hover {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+
+  h3 {
+    margin: 0;
+    padding: 1rem 0.6rem 0;
+  }
+
+  ul {
     margin: 0;
     padding: 0;
     list-style: none;
@@ -28,35 +92,51 @@ header.Header--main {
     li:last-child > a {
       padding-right: 0;
     }
-  }
 
-  a {
-    padding: 0.6rem;
-    display: inline-block;
+    @media (max-width: 760px) {
+      display: block;
 
-    &:hover {
-      cursor: pointer;
-      text-decoration: underline;
+      li:first-child > a,
+      li:last-child > a {
+        padding: 0.6rem;
+      }
     }
   }
 
-  nav img {
+  img {
     height: 1.2rem;
     vertical-align: middle;
     padding-bottom: 0.1rem;
+
+    @media (max-width: 760px) {
+      margin-right: 0.5rem;
+    }
   }
 
-  .Header-topBar {
-    display: flex;
-    justify-content: space-between;
+  nav {
+    @media (max-width: 760px) {
+      display: none;
+    }
   }
 
-  nav.nav--main {
-    width: 100%;
-    height: auto;
+  &.Header--main__menuOpen nav {
+    @media (max-width: 760px) {
+      background-color: var(--color-white);
+      display: block;
+    }
+  }
 
-    ul {
-      justify-content: flex-end;
+  .u-hideOnDesktop {
+    display: none;
+
+    @media (max-width: 760px) {
+      display: block;
+    }
+  }
+
+  .u-hideOnMobile {
+    @media (max-width: 760px) {
+      display: none;
     }
   }
 }