Hide header menu when the screen is small

.env.local

@@ -0,0 +1 @@
+REACT_EDITOR=emacs

src/components/header/header.module.css

@@ -54,6 +54,16 @@
     padding: .85714286em 1.14285714em;
 }
 
+@media (max-width: 768px) {
+    .menu {
+        padding: .85714286em 1.14285714em;
+    }
+
+    .menuItem {
+        display: none;
+    }
+}
+
 .menuItem:hover {
     color: #fff;
 }

src/components/header/headerMenu.tsx

@@ -1,6 +1,7 @@
 import * as classNames from "classnames";
 import Link from "gatsby-link";
 import * as React from "react";
+import { FaBars } from "react-icons/lib/fa";
 
 import { MenuModel, menuModel } from "../menu";
 
@@ -36,13 +37,7 @@ const HeaderMenu = (props: HeaderMenuProp) => {
       {Object.keys(menuModel).map((key: string) => (
         <MenuItem key={key} pathname={props.pathname} itemName={key} />
       ))}
-      {/* <Menu.Item
-        as="button"
-        icon="content"
-        className="mobile only"
-        position="right"
-        size="large"
-        />*/}
+      {<FaBars />}
     </nav>
   );
 };