From 18806c15cf92a3df191ec1b913ca8e18503736d2 Mon Sep 17 00:00:00 2001
From: gabehab <gabehab@users.noreply.github.com>
Date: Sun, 28 Feb 2021 20:37:59 -0800
Subject: [PATCH] Add temporary close and open menu icons

---
 components/layout/Header.js         | 10 +++++---
 components/layout/Header.module.css | 38 ++++++++++++++++++++++++-----
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/components/layout/Header.js b/components/layout/Header.js
index 3cbcd81b..f607e32a 100644
--- a/components/layout/Header.js
+++ b/components/layout/Header.js
@@ -10,8 +10,6 @@ import UpdateNotice from 'components/common/UpdateNotice';
 import UserButton from 'components/settings/UserButton';
 import Logo from 'assets/logo.svg';
 import styles from './Header.module.css';
-import Sun from 'assets/sun.svg';
-import Moon from 'assets/moon.svg';
 
 export default function Header() {
   const user = useSelector(state => state.user);
@@ -40,9 +38,13 @@ export default function Header() {
             aria-expanded="false"
           >
             {active ? (
-              <Icon icon={<Sun />} size="large" className={styles.logo} />
+              <div> X </div>
             ) : (
-              <Icon icon={<Moon />} size="large" className={styles.logo} />
+              <>
+                <span></span>
+                <span></span>
+                <span></span>
+              </>
             )}
           </button>
           {user && (
diff --git a/components/layout/Header.module.css b/components/layout/Header.module.css
index 0659a53d..77bb8b8f 100644
--- a/components/layout/Header.module.css
+++ b/components/layout/Header.module.css
@@ -29,11 +29,11 @@
 
 .nav {
   display: flex;
-  justify-content: space-between;
   align-items: center;
   font-size: var(--font-size-normal);
   font-weight: 600;
   width: 100%;
+  justify-content: space-between;
 }
 
 .items {
@@ -57,12 +57,15 @@
 @media only screen and (max-width: 992px) {
   .nav {
     font-size: var(--font-size-large);
-    justify-content: center;
-    padding: 20px 0;
+    justify-content: space-between;
+    margin: 20px 0;
+  }
+  .items {
+    flex-wrap: wrap;
   }
 }
 
-@media only screen and (max-width: 576px) {
+@media only screen and (max-width: 768px) {
   .header {
     padding: 0 15px;
   }
@@ -70,6 +73,9 @@
   .nav {
     font-size: var(--font-size-normal);
     flex-wrap: wrap;
+    justify-content: center;
+    flex-direction: column;
+    position: relative;
   }
 
   .items {
@@ -95,11 +101,31 @@
 
   .burger {
     display: block;
-    color: #4a4a4a;
+    /* color: #4a4a4a; */
     cursor: pointer;
     height: 3.25rem;
-    position: relative;
     width: 3.25rem;
     margin-left: auto;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .burger span {
+    transform: translateX(-50%);
+    padding: 1px 0px;
+    margin: 6px 0;
+    width: 20px;
+    display: block;
+    background-color: white;
+  }
+
+  .burger div {
+    height: 100%;
+    color: white;
+    text-align: center;
+    margin: auto;
+    font-size: 1.5rem;
+    transform: translateX(-50%);
   }
 }