From 844231e9729fc79ba41a69afd63bbe43b197376e Mon Sep 17 00:00:00 2001
From: Nathan Tang <nate.tang2@gmail.com>
Date: Mon, 30 Aug 2021 07:49:35 -0700
Subject: [PATCH] mobile friendly nav bar

---
 package-lock.json                |  5 +++
 package.json                     |  1 +
 src/components/navbar/navbar.css | 69 +++++++++++++++++++++++++++++++-
 src/components/navbar/navbar.js  | 50 ++++++++++++++---------
 4 files changed, 106 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e8739fa..778f7a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12689,6 +12689,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
     },
+    "react-icons": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz",
+      "integrity": "sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ=="
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 390b157..871300b 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "@testing-library/user-event": "^12.8.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "react-widgets": "^5.2.0",
diff --git a/src/components/navbar/navbar.css b/src/components/navbar/navbar.css
index 1f69a0d..d1880a2 100644
--- a/src/components/navbar/navbar.css
+++ b/src/components/navbar/navbar.css
@@ -1,7 +1,7 @@
 .nav-bar {
     width: 200px;
     height: 100vh;
-    background-color: #6c87e9;  
+    background-color: #6c87e9;
 }
 
 .workspace {
@@ -18,4 +18,71 @@ li {
     list-style-type: none;
     margin-top: 1em;
     text-align: left;
+}
+
+.navbar {
+    background-color: #6c87e9;
+    height: 80px;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+}
+
+.nav-menu-bars {
+    margin: 1rem;
+    font-size: 2rem;
+}
+
+.nav-menu {
+    background-color: #6c87e9;
+    width: 250px;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    left: -100%;
+    transition: 850ms;
+}
+
+.nav-menu.active {
+    left: 0;
+    transition: 350ms;
+}
+
+.nav-text {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    padding: 8px 0px 8px 16px;
+    list-style: none;
+    height: 60px;
+}
+
+.nav-text a {
+    text-decoration: none;
+    color: #f5f5f5;
+    font-size: 18px;
+    width: 95%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    border-radius: 4px;
+}
+
+.nav-text a:hover {
+    background-color: #1a83ff;
+}
+
+.nav-menu-items {
+    width: 100%;
+}
+
+.nav-menu-items .nav-menu-x {
+    display: flex;
+
+    align-content: start;
+    margin: 1rem -1rem;
+    font-size: 2rem;
 }
\ No newline at end of file
diff --git a/src/components/navbar/navbar.js b/src/components/navbar/navbar.js
index 36846d1..89cb21f 100644
--- a/src/components/navbar/navbar.js
+++ b/src/components/navbar/navbar.js
@@ -1,30 +1,44 @@
 import './navbar.css';
 
+import * as FaIcons from 'react-icons/fa';
+import * as AiIcons from 'react-icons/ai';
 import {NavLink} from 'react-router-dom';
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 import AppContext from '../../AppContext';
+import { IconContext } from 'react-icons';
 
 function NavBar({ onLogout }) {
   const { workspace } = useContext(AppContext)
+  const [sidebar, setSidebar] = useState(true);
+  const toggleSidebar = () => setSidebar(!sidebar);
 
   return (
-    <div className="nav-bar">
-        <h1>EventBot</h1>
-        {workspace && 
-            <div>
-                <div className="workspace">
-                    <h3>{workspace.team.name}</h3>
-                    <button onClick={onLogout}>Log Out</button>
-                </div>
-                <ul>
-                    <li><NavLink to='/'>Home</NavLink></li>
-                    <li><NavLink to='/sendMessage'>Send Message</NavLink></li>
-                    <li><NavLink to='/scheduleMessage'>Schedule Message</NavLink></li>
-                    <li><NavLink to='/editMessage'>Edit Message</NavLink></li>
-                </ul>
-            </div>
-        }
-    </div>
+      <IconContext.Provider value={{ color: '#fff' }}>
+          {workspace &&
+              <div>
+                  <div className='navbar'>
+                      <NavLink to='#' className='nav-menu-bars'>
+                          <FaIcons.FaBars onClick={toggleSidebar}/>
+                      </NavLink>
+                  </div>
+                  <nav className={sidebar ? 'nav-menu active' : 'nav-menu'}>
+                      <ul className='nav-menu-items'>
+                          <div className='nav-menu-x' onClick={toggleSidebar}>
+                              <AiIcons.AiOutlineClose/>
+                              </div>
+                              <div>
+                                <h3>{workspace.team.name}</h3>
+                              <button onClick={() => {onLogout(); toggleSidebar()}}>Log Out</button>
+                          </div>
+                      <li><NavLink to='/'>Home</NavLink></li>
+                      <li><NavLink to='/sendMessage'>Send Message</NavLink></li>
+                      <li><NavLink to='/scheduleMessage'>Schedule Message</NavLink></li>
+                      <li><NavLink to='/editMessage'>Edit Message</NavLink></li>
+                      </ul>
+                  </nav>
+              </div>
+          }
+      </IconContext.Provider>
   );
 }