From a9a3bcb7715008a67f27d1c658563dedb69075bc Mon Sep 17 00:00:00 2001 From: Zack Stickles Date: Wed, 22 Apr 2020 13:47:57 -0700 Subject: [PATCH 01/11] chore: reorganized markdown for mobile use --- src/components/Header.js | 66 ++++++++++++++++++-------------------- src/components/Header.scss | 15 ++++++--- 2 files changed, 42 insertions(+), 39 deletions(-) diff --git a/src/components/Header.js b/src/components/Header.js index 2dcd2e997..2ff1ab867 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -30,40 +30,28 @@ const Header = ({ pages }) => { return (
-
- - - -
+

{''} New Relic Developers @@ -78,6 +66,16 @@ const Header = ({ pages }) => { ))} + +

); diff --git a/src/components/Header.scss b/src/components/Header.scss index 37942c798..3934556a0 100644 --- a/src/components/Header.scss +++ b/src/components/Header.scss @@ -2,6 +2,10 @@ header.Header--main { background-color: #d7e6e8; margin-bottom: 1rem; + .u-container { + position: relative; + } + a { color: #000; text-decoration: none; @@ -16,6 +20,12 @@ header.Header--main { } } + nav.nav--tools { + position: absolute; + top: 0; + right: 0; + } + nav > ul { margin: 0; padding: 0; @@ -47,11 +57,6 @@ header.Header--main { padding-bottom: 0.1rem; } - .Header-topBar { - display: flex; - justify-content: space-between; - } - nav.nav--main { width: 100%; height: auto; From 89e42779b24440626dc84928794fe9ba5e608cf2 Mon Sep 17 00:00:00 2001 From: Zack Stickles Date: Wed, 22 Apr 2020 14:51:18 -0700 Subject: [PATCH 02/11] chore: added classnames package --- package-lock.json | 5 +++++ package.json | 1 + 2 files changed, 6 insertions(+) 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", From ecc9e1f5d68d09989fc202b6c51960297715a622 Mon Sep 17 00:00:00 2001 From: Zack Stickles Date: Wed, 22 Apr 2020 14:51:43 -0700 Subject: [PATCH 03/11] feat: created hamburger menu component --- src/components/HamburgerMenu.js | 31 +++++++++++++++++++++++++++++++ src/components/HamburgerMenu.scss | 29 +++++++++++++++++++++++++++++ 2 files changed, 60 insertions(+) create mode 100644 src/components/HamburgerMenu.js create mode 100644 src/components/HamburgerMenu.scss diff --git a/src/components/HamburgerMenu.js b/src/components/HamburgerMenu.js new file mode 100644 index 000000000..0078169ab --- /dev/null +++ b/src/components/HamburgerMenu.js @@ -0,0 +1,31 @@ +import React, { useState } from 'react'; +import PropTypes from 'prop-types'; +import cx from 'classnames'; + +import './HamburgerMenu.scss'; + +const HamburgerMenu = ({ onClick }) => { + const [open, updateOpen] = useState(false); + + return ( + + ); +}; + +HamburgerMenu.propTypes = { + onClick: PropTypes.func.isRequired, +}; + +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); + } + } +} From 90fe6b15b6d0b79b63e11eb965b4bbb77e8e16bd Mon Sep 17 00:00:00 2001 From: Zack Stickles Date: Wed, 22 Apr 2020 15:46:32 -0700 Subject: [PATCH 04/11] feat: mobile header menu --- src/components/Header.js | 26 ++++++++++++++--- src/components/Header.scss | 59 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 81 insertions(+), 4 deletions(-) diff --git a/src/components/Header.js b/src/components/Header.js index 2ff1ab867..6939e66ab 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,12 +1,17 @@ import { Link, useStaticQuery, graphql } from 'gatsby'; -import React from 'react'; +import React, { useState } from 'react'; import PropTypes from 'prop-types'; +import cx from 'classnames'; import Container from './Container'; import ExternalLink from './ExternalLink'; +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 { @@ -28,11 +33,21 @@ const Header = ({ pages }) => { `); return ( -
+
+
+

+ {''} New Relic Developers +

+ setMenuOpen(!menuOpen)} /> +
+ -

+

{''} New Relic Developers