diff --git a/package-lock.json b/package-lock.json
index add9c188f..b7fa7a493 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4278,6 +4278,11 @@
}
}
},
+ "classnames": {
+ "version": "2.2.6",
+ "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+ "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+ },
"clean-stack": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
diff --git a/package.json b/package.json
index 3712db999..91da0dc70 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/HamburgerMenu.js b/src/components/HamburgerMenu.js
new file mode 100644
index 000000000..476b0f8fe
--- /dev/null
+++ b/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 }) => (
+
+);
+
+HamburgerMenu.propTypes = {
+ toggle: PropTypes.func.isRequired,
+ open: PropTypes.bool,
+};
+
+HamburgerMenu.defaultProps = {
+ open: false,
+};
+
+export default HamburgerMenu;
diff --git a/src/components/HamburgerMenu.scss b/src/components/HamburgerMenu.scss
new file mode 100644
index 000000000..2da7714fe
--- /dev/null
+++ b/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);
+ }
+ }
+}
diff --git a/src/components/Header.js b/src/components/Header.js
index e8bc5bda1..421d496b9 100644
--- a/src/components/Header.js
+++ b/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 (
-
+
-
-
-
-
-
+
{''} New Relic Developers
-
);
diff --git a/src/components/Header.scss b/src/components/Header.scss
index 0dff30c5a..64c566b44 100644
--- a/src/components/Header.scss
+++ b/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;
}
}
}