fix mobile menu and change hamburger menu

Author: dpatanin

package-lock.json

@@ -24,6 +24,7 @@
     "gatsby-source-git": "github:stevetweeddale/gatsby-source-git",
     "gatsby-transformer-remark": "^2.6.10",
     "react": "^16.8.6",
+    "react-burger-menu": "^2.6.11",
     "react-dom": "^16.8.6",
     "react-helmet": "^5.2.1"
   },

package.json

@@ -1,24 +1,10 @@
 import React from 'react';
 import { Link } from 'gatsby';
 import Menu from './Menu';
-import Hamburger from './Hamburger';
 import logo from '../images/Logo White.svg';
 import logoMobile from '../images/Logo White.svg';
-import MenuMobile from './MenuMobile';
 
 class Header extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      menuActive: false,
-    };
-  }
-
-  toggleMenu = menuActive => {
-    this.setState(prevState => ({
-      menuActive: !prevState.menuActive,
-    }));
-  };
 
   render() {
     return (
@@ -34,9 +20,7 @@ class Header extends React.Component {
               <img alt="secureCodeBox Homepage" src={logoMobile} />
             </Link>
           </div>
-          <MenuMobile active={this.state.menuActive} />
           <Menu />
-          <Hamburger toggleMenu={this.toggleMenu} />
         </div>
       </div>
     );

src/components/Hamburger.js

@@ -3,20 +3,22 @@ import SEO from './SEO';
 import Header from './Header';
 import Footer from './Footer';
 import '../scss/style.scss';
+import MenuMobile from "../components/MenuMobile"; 
 
 const Layout = props => {
   return (
     <React.Fragment>
       <SEO />
-      <div className={`page${props.bodyClass ? ` ${props.bodyClass}` : ''}`}>
+      <div className={`page${props.bodyClass ? ` ${props.bodyClass}` : ""}`}>
         <div id="wrapper" className="wrapper">
           <Header />
+          <MenuMobile />
           {props.children}
         </div>
         <Footer />
       </div>
     </React.Fragment>
-  )
+  );
 }
 
 export default Layout

src/components/Header.js

@@ -1,21 +1,27 @@
-import React from 'react';
-import { graphql, StaticQuery, Link } from 'gatsby';
+import React from "react";
+import { graphql, StaticQuery, Link } from "gatsby";
+import { slide as Menu } from "react-burger-menu";
+import hamburgerIcon from "../images/hamburger-white.svg";
 
 const MenuMobile = props => {
   const { menuLinks } = props.data.site.siteMetadata;
   return (
-    <div
-      id="main-menu-mobile"
-      className={`main-menu-mobile ${props.active ? 'open' : ''}`}
+    <Menu
+      right
+      id="slide"
+      width={"100vw"}
+      className={`main-menu-mobile ${props.active ? "open" : ""}`}
+      customBurgerIcon={<img src={hamburgerIcon} alt="menu"/>}
+      styles={{
+        bmBurgerBars: {
+          height: "3px"
+        }
+      }}
     >
-      <ul>
-        {menuLinks.map(link => (
-          <li key={link.name}>
-            <Link to={link.link}>{link.name}</Link>
-          </li>
-        ))}
-      </ul>
-    </div>
+      {menuLinks.map(link => (
+        <Link to={link.link}>{link.name}</Link>
+      ))}
+    </Menu>
   );
 };
 
@@ -33,6 +39,6 @@ export default props => (
         }
       }
     `}
-    render={data => <MenuMobile active={props.active} data={data} />}
+    render={data => <MenuMobile data={data} />}
   />
 );