From d24518e2439947526061c72efe4d8841badc57a0 Mon Sep 17 00:00:00 2001
From: Tim Glaser <tglaser@newrelic.com>
Date: Tue, 16 Jun 2020 18:37:18 -0700
Subject: [PATCH] feat: Add menu button to mobile header

---
 src/components/HamburgerMenu.module.scss |  2 ++
 src/components/Layout.module.scss        |  2 +-
 src/components/MobileHeader.js           | 26 +++++++++++++++++-------
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/HamburgerMenu.module.scss b/src/components/HamburgerMenu.module.scss
index 3ff0a0d2e..7622e270b 100644
--- a/src/components/HamburgerMenu.module.scss
+++ b/src/components/HamburgerMenu.module.scss
@@ -1,8 +1,10 @@
 button.hamburgerMenu {
+  display: block;
   background: none;
   border: 0;
   cursor: pointer;
   width: 4rem;
+  outline: none;
 
   div {
     width: 100%;
diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
index 9531c9ef9..c43b0351f 100644
--- a/src/components/Layout.module.scss
+++ b/src/components/Layout.module.scss
@@ -22,7 +22,7 @@
 }
 
 .hideOnDesktop {
-  @media (min-width: 760px) {
+  @media (min-width: 760px + 1) {
     display: none;
   }
 }
diff --git a/src/components/MobileHeader.js b/src/components/MobileHeader.js
index 2ce030183..b05025019 100644
--- a/src/components/MobileHeader.js
+++ b/src/components/MobileHeader.js
@@ -1,16 +1,28 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
 import cx from 'classnames';
 import Navigation from './Navigation';
+import HamburgerMenu from './HamburgerMenu';
 import styles from './MobileHeader.module.scss';
 
-const MobileHeader = ({ className }) => (
-  <aside className={cx(styles.container, className)}>
-    <Link to="/" className={styles.logo} />
-    {/* <Navigation /> */}
-  </aside>
-);
+const MobileHeader = ({ className }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <aside className={cx(styles.container, className)}>
+      <Link to="/" className={styles.logo} />
+
+      <HamburgerMenu
+        className={styles.hamburgerMenu}
+        toggle={() => setIsOpen(!isOpen)}
+        isOpen={isOpen}
+      />
+
+      {/* <Navigation /> */}
+    </aside>
+  );
+};
 
 MobileHeader.propTypes = {
   className: PropTypes.string,