Made Navbar Responsive (fordevio#30)

* updated client/src/components/Navbar/index.tsx and client/src/components/Navbar/index.css to make navbar responsive

* Delete package-lock.json

* fixed formatting issues in files

* attempt fordevio#1 to fix early return issue of useState in index.tsx

---------

Co-authored-by: root <root@arshika>

client/src/components/Navbar/index.css

@@ -3,18 +3,115 @@
   width: 100%;
   background-color: rgb(65, 146, 223);
   display: flex;
+  align-items: center;
+  position: sticky;
+  top: 0;
 }
 
 .logo {
   height: 100%;
   width: 80px;
 }
 
-.link {
+nav ul {
+  display: flex;
+  /* position: relative;  */
+}
+
+nav ul li {
+  list-style: none;
+}
+
+nav ul li a {
   color: rgb(73, 7, 148);
   font-size: 20px;
   font-weight: bold;
   font-family: 'Courier New', Courier, monospace;
   cursor: pointer;
   text-decoration: none;
+  padding: 0.9rem;
+}
+
+nav .menu {
+  display: none;
+  position: absolute;
+  top: 0.75rem;
+  right: 0.5rem;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 2.25rem;
+  height: 2rem;
+  z-index: 999;
+}
+nav .menu span {
+  /* height: 0.4rem; */
+  height: 0.3rem;
+  width: 100%;
+  background-color: #fff;
+  border-radius: 0.2rem;
+}
+
+@media (max-width: 580px) {
+  nav .menu {
+    display: flex;
+    width: 2.5rem;
+  }
+
+  nav {
+    flex-direction: column;
+    align-items: start;
+  }
+
+  nav ul {
+    display: none;
+    flex-direction: column;
+    width: 100%;
+    margin-bottom: 0.25 rem;
+    margin-top: unset;
+    padding-top: 20px;
+    z-index: 99;
+  }
+
+  nav ul.open {
+    display: flex;
+    background-color: rgb(96, 157, 227);
+  }
+
+  nav ul li {
+    width: 100%;
+    text-align: center;
+    padding-bottom: 0.7rem;
+  }
+
+  nav ul li a {
+    margin: 0.2rem 0.5rem;
+  }
+}
+
+nav .menu.open span {
+  position: absolute;
+}
+
+nav .menu.open span:nth-child(1) {
+  transform: rotate(45deg);
+  position: absolute;
+  top: 50%;
+}
+
+nav .menu.open span:nth-child(2) {
+  opacity: 0;
+}
+
+nav .menu.open span:nth-child(3) {
+  transform: rotate(-45deg);
+
+  position: absolute;
+  top: 50%;
+}
+
+nav .menu span {
+  transition:
+    transform 0.3s ease-in-out,
+    opacity 0.3s ease-in-out,
+    top 0.3s ease-in-out;
 }

client/src/components/Navbar/index.tsx

@@ -1,71 +1,82 @@
 import './index.css';
 import wharfLogo from '../../assets/wharf.png';
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 import UserContext from '../../context/user/userContext';
 import { Link, useLocation } from 'react-router-dom';
+
 const Navbar = () => {
   const userContext = useContext(UserContext);
-
   const location = useLocation();
   const currentPath = location.pathname;
 
-  if (userContext == null || userContext.curUser == null) {
-    return <></>;
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  if (!userContext || !userContext.curUser) {
+    return null;
   }
 
   return (
-    <div className="nav">
+    <nav className="nav">
       <img src={wharfLogo} className="logo" alt="wharf" />
-      <div className="nav-cont">
-        <div>
+
+      <div
+        className={`menu ${menuOpen ? 'open' : ''}`}
+        onClick={() => setMenuOpen(!menuOpen)}
+      >
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+      <ul className={menuOpen ? 'open' : ''}>
+        <li>
           <Link
             to="/"
             className="link"
             style={currentPath === '/' ? { color: 'blue' } : {}}
           >
             Containers
           </Link>
-        </div>
-        <div>
+        </li>
+        <li>
           <Link
-            to={'/images'}
+            to="/images"
             className="link"
             style={currentPath === '/images' ? { color: 'blue' } : {}}
           >
             Images
           </Link>
-        </div>
-        <div>
+        </li>
+        <li>
           <Link
-            to={'/volumes'}
+            to="/volumes"
             className="link"
             style={currentPath === '/volumes' ? { color: 'blue' } : {}}
           >
             Volumes
           </Link>
-        </div>
-        <div>
+        </li>
+        <li>
           <Link
-            to={'/networks'}
+            to="/networks"
             className="link"
             style={currentPath === '/networks' ? { color: 'blue' } : {}}
           >
             Networks
           </Link>
-        </div>
-        {userContext.curUser.isAdmin === true && (
-          <div>
+        </li>
+        {userContext.curUser.isAdmin && (
+          <li>
             <Link
-              to={'/users'}
+              to="/users"
               className="link"
               style={currentPath === '/users' ? { color: 'blue' } : {}}
             >
               Users
             </Link>
-          </div>
+          </li>
         )}
-      </div>
-    </div>
+      </ul>
+    </nav>
   );
 };