From 48b65ff199edc241d2c53b49e770695f9ff2b2ef Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Sat, 8 Aug 2020 22:06:17 -0700
Subject: [PATCH] fix: use HamburgerMenu from the theme

---
 src/components/HamburgerMenu.js          | 30 --------------------
 src/components/HamburgerMenu.module.scss | 36 ------------------------
 src/components/MobileHeader.js           |  6 ++--
 3 files changed, 3 insertions(+), 69 deletions(-)
 delete mode 100644 src/components/HamburgerMenu.js
 delete mode 100644 src/components/HamburgerMenu.module.scss

diff --git a/src/components/HamburgerMenu.js b/src/components/HamburgerMenu.js
deleted file mode 100644
index 080bb7f44..000000000
--- a/src/components/HamburgerMenu.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import styles from './HamburgerMenu.module.scss';
-
-const HamburgerMenu = ({ className, toggle, isOpen }) => (
-  <button
-    aria-expanded={isOpen}
-    aria-label="Mobile Menu"
-    type="button"
-    className={cx(styles.hamburgerMenu, className, { [styles.isOpen]: isOpen })}
-    onClick={() => toggle()}
-  >
-    <div />
-    <div />
-    <div />
-  </button>
-);
-
-HamburgerMenu.propTypes = {
-  className: PropTypes.string,
-  toggle: PropTypes.func.isRequired,
-  isOpen: PropTypes.bool,
-};
-
-HamburgerMenu.defaultProps = {
-  isOpen: false,
-};
-
-export default HamburgerMenu;
diff --git a/src/components/HamburgerMenu.module.scss b/src/components/HamburgerMenu.module.scss
deleted file mode 100644
index c0cb0f550..000000000
--- a/src/components/HamburgerMenu.module.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-button.hamburgerMenu {
-  display: block;
-  background: none;
-  border: 0;
-  cursor: pointer;
-  width: 2rem;
-  outline: none;
-  padding: 0;
-
-  div {
-    width: 100%;
-    height: 4px;
-    background-color: var(--color-black);
-    margin: 5px 0;
-    border-radius: 2px;
-    transition: 0.18s;
-
-    :global(.dark-mode) & {
-      background-color: var(--color-white);
-    }
-  }
-
-  &.isOpen {
-    :nth-child(1) {
-      transform: rotate(-45deg) translate(-6.5px, 6.5px);
-    }
-
-    :nth-child(2) {
-      opacity: 0;
-    }
-
-    :nth-child(3) {
-      transform: rotate(45deg) translate(-6px, -6.5px);
-    }
-  }
-}
diff --git a/src/components/MobileHeader.js b/src/components/MobileHeader.js
index 2343aa044..17ebcf262 100644
--- a/src/components/MobileHeader.js
+++ b/src/components/MobileHeader.js
@@ -4,7 +4,7 @@ import { css } from '@emotion/core';
 import { Link } from 'gatsby';
 import Logo from './Logo';
 import Navigation from './Navigation';
-import HamburgerMenu from './HamburgerMenu';
+import { HamburgerMenu } from '@newrelic/gatsby-theme-newrelic';
 import SearchInput from './SearchInput';
 
 const MobileHeader = ({ className, isOpen, toggle }) => {
@@ -33,12 +33,12 @@ const MobileHeader = ({ className, isOpen, toggle }) => {
           <Logo
             css={css`
               display: block;
-              width: 160px;
+              width: 150px;
             `}
           />
         </Link>
 
-        <HamburgerMenu toggle={toggle} isOpen={isOpen} />
+        <HamburgerMenu onToggle={toggle} isOpen={isOpen} />
       </div>
 
       {isOpen && (