Add hamburger menu for chat window

Author: C-Garza

streams-react/src/components/NavBar/NavBar.js

@@ -1,12 +1,38 @@
+import { useContext } from "react";
 import {Link} from "react-router-dom";
+import { ChatContext } from "../../context/ChatContext";
+import { SocketContext } from "../../context/SocketContext";
 import styles from "./NavBar.module.css";
 
 const NavBar = () => {
+  const {isChatOpen, setIsChatOpen} = useContext(ChatContext);
+  const {socket} = useContext(SocketContext);
+
+  const handleClick = () => {
+    setIsChatOpen(c => !c);
+  };
+
+  const handleKeyDown = (e) => {
+    if(e.keyCode === 32 || e.keyCode === 13) {
+      handleClick();
+    }
+  };
+
   return(
     <nav className={styles.nav}>
       <div className={styles.container}>
-        <Link to="/" className={styles.logo}>P2P React</Link>
-        <div className={styles.underline}></div>
+        <div className={styles.logo__container}>
+          <Link to="/" className={styles.logo}>P2P React</Link>
+          <div className={styles.underline}></div>
+        </div>
+        <div className={`${socket ? styles.hamburger : styles.hidden}`} onClick={handleClick} onKeyDown={handleKeyDown} tabIndex="0">
+          <div className={`${styles.line} ${styles.line__one} ${isChatOpen ? styles.hidden : styles["line__one--closed"]}`}></div>
+          <div className={`${styles.line} ${styles.line__two} ${isChatOpen ? styles.hidden : styles["line__two--closed"]}`}></div>
+          <div className={`${styles.line} ${styles.line__three} ${isChatOpen ? styles.hidden : styles["line__three--closed"]}`}></div>
+          <div className={`${styles.line} ${styles.line__one} ${isChatOpen ? styles["line__one--open"] : styles.hidden}`}></div>
+          <div className={`${styles.line} ${styles.line__two} ${isChatOpen ? styles["line__two--open"] : styles.hidden}`}></div>
+          <div className={`${styles.line} ${styles.line__three} ${isChatOpen ? styles["line__three--open"] : styles.hidden}`}></div>
+        </div>
       </div>
     </nav>
   );

streams-react/src/components/NavBar/NavBar.module.css

@@ -12,6 +12,12 @@
 .container {
   position: relative;
   margin-left: 15px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.logo__container {
+  position: relative;
 }
 .logo {
   position: relative;
@@ -30,7 +36,89 @@
   transition: all 0.25s;
   background-color: #40476D;
 }
-.container:hover .underline {
+.logo__container:hover .underline {
   background-color: #FCFFFC;
   transform: scaleX(1);
+}
+.hamburger {
+  margin-left: auto;
+  margin-right: 15px;
+  border: 3px solid #EEEEEE;
+  border-radius: 5px;
+  cursor: pointer;
+  position: relative;
+}
+.line {
+  width: 25px;
+  height: 4px;
+  margin: 7px;
+  border-radius: 15px;
+  background-color: #EEEEEE;
+}
+.hamburger:hover, .hamburger:focus {
+  border: 3px solid white;
+}
+.hamburger:hover .line, .hamburger:focus .line {
+  background-color: white;
+}
+.line__one {
+  
+}
+.line__two {
+  
+}
+.line__three {
+  
+}
+.line__one--open {
+  animation: lineOneOpen 0.35s forwards ease-in;
+}
+.line__two--open {
+  animation: lineTwoOpen 0.35s forwards ease-in;
+}
+.line__three--open {
+  animation: lineThreeOpen 0.35s forwards ease-in;
+}
+
+.line__one--closed {
+  animation: lineOneOpen 0.35s reverse ease-in;
+}
+.line__two--closed {
+  animation: lineTwoOpen 0.35s reverse ease-in;
+}
+.line__three--closed {
+  animation: lineThreeOpen 0.35s reverse ease-in;
+}
+.hidden {
+  display: none;
+}
+@keyframes lineOneOpen {
+  0% {
+    transform: translateY(0deg);
+  }
+  50% {
+    transform: translateY(calc(100% + 7px));
+  }
+  100% {
+    transform: translateY(calc(100% + 7px)) rotate(45deg);
+  }
+}
+@keyframes lineTwoOpen {
+  0% {
+    transform: scaleX(1);
+  }
+  100% {
+    transform: scaleX(0);
+  }
+}
+@keyframes lineThreeOpen {
+  0% {
+    transform: translateY(0deg);
+  }
+  50% {
+    transform: translateY(calc(-100% - 7px));
+  }
+  100% {
+    transform: translateY(calc(-100% - 7px)) rotate(-45deg);
+  }
 }