From 1e3241c03e523103f9dd83605c406d32a35d845e Mon Sep 17 00:00:00 2001
From: Lesley <lesleylai@lesleylai.info>
Date: Fri, 26 Oct 2018 15:46:51 -0600
Subject: [PATCH] Hide header menu when the screen is small

---
 .env.local                              |  1 +
 src/components/header/header.module.css | 10 ++++++++++
 src/components/header/headerMenu.tsx    |  9 ++-------
 3 files changed, 13 insertions(+), 7 deletions(-)
 create mode 100644 .env.local

diff --git a/.env.local b/.env.local
new file mode 100644
index 0000000..90b7fcd
--- /dev/null
+++ b/.env.local
@@ -0,0 +1 @@
+REACT_EDITOR=emacs
diff --git a/src/components/header/header.module.css b/src/components/header/header.module.css
index 4fc82f1..36fce84 100644
--- a/src/components/header/header.module.css
+++ b/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;
 }
diff --git a/src/components/header/headerMenu.tsx b/src/components/header/headerMenu.tsx
index 2abda8d..7e02734 100644
--- a/src/components/header/headerMenu.tsx
+++ b/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>
   );
 };