Makes Navbar responsive

React/package-lock.json

@@ -3822,6 +3822,11 @@
         }
       }
     },
+    "css-mediaquery": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+      "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA="
+    },
     "css-prefers-color-scheme": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz",
@@ -6210,6 +6215,11 @@
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -8139,6 +8149,14 @@
         "object-visit": "^1.0.0"
       }
     },
+    "matchmediaquery": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
+      "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
+      "requires": {
+        "css-mediaquery": "^0.1.2"
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -10651,6 +10669,17 @@
         "react-is": "^16.9.0"
       }
     },
+    "react-responsive": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.2.0.tgz",
+      "integrity": "sha512-iagCqVrw4QSjhxKp3I/YK6+ODkWY6G+YPElvdYKiUUbywwh9Ds0M7r26Fj2/7dWFFbOpcGnJE6uE7aMck8j5Qg==",
+      "requires": {
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.3.0",
+        "prop-types": "^15.6.1",
+        "shallow-equal": "^1.1.0"
+      }
+    },
     "react-router": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.0.tgz",
@@ -11578,6 +11607,11 @@
         }
       }
     },
+    "shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",

React/package.json

@@ -10,6 +10,7 @@
     "react-dom": "^16.10.0",
     "react-icons": "^4.1.0",
     "react-redux": "^7.1.1",
+    "react-responsive": "^8.2.0",
     "react-router-dom": "^5.1.0",
     "react-scripts": "3.1.2",
     "redux": "^4.0.4",

React/src/index.css

@@ -9,6 +9,10 @@
   background-color: var(--blue);
 }
 
+.text-blue-custom {
+  color: var(--blue);
+}
+
 p,
 .font-inter {
   font-family: "Inter", sans-serif;
@@ -36,3 +40,51 @@ button:hover {
   background-color: #1d6ab1;
   border: none;
 }
+
+@media only screen and (max-width: 950px) {
+  .navbar-list {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    flex-direction: column;
+    align-items: flex-start;
+    background-color: #dfdfdf;
+    width: 40vw;
+    height: 100vh;
+    padding: 35vh 5vw 35vh 5vw;
+  }
+
+  .navbar-list li a,
+  .navbar-list li:nth-child(3) {
+    font-size: 1.5rem !important;
+    border-bottom: 1px solid var(--blue);
+    padding-bottom: 5px;
+    color: var(--blue);
+  }
+
+  .navbar-list li a:hover {
+    color: var(--blue);
+  }
+
+  .hamburger-menu {
+    display: block;
+    z-index: 1000;
+  }
+}
+
+@media only screen and (max-width: 700px) {
+  .navbar-list {
+    width: 50vw;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .navbar-list {
+    width: 65vw;
+  }
+
+  .navbar-list li a,
+  .navbar-list li:nth-child(3) {
+    font-size: 1.28rem !important;
+  }
+}

React/src/pages/components/Navbar.js

@@ -1,10 +1,17 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import logo from "../../images/logo.svg";
 import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
+import { IoMdMenu } from "react-icons/io";
+import { useMediaQuery } from "react-responsive";
+
+// Services
 import { signoutRedirect } from "../../services/userService";
 
 const Navbar = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const isMobile = useMediaQuery({ query: "(max-width: 950px)" });
+
   const user = useSelector((state) => state.auth.user);
 
   function signOut() {
@@ -16,38 +23,57 @@ const Navbar = () => {
       className="w-screen bg-blue-custom flex justify-center items-center fixed top-0 left-0"
       style={{ height: "80px" }}
     >
-      <nav className="flex items-center justify-between w-4/5">
+      <nav className="flex items-center justify-between xl:w-4/5 w-10/12">
         <Link to="/">
           <img src={logo} alt="logo" className="h-24" />
         </Link>
         {user ? (
-          <ul className="list-none flex items-center justify-between w-2/6 m-0">
+          <>
-            <li className="m-0">
+            <IoMdMenu
-              <Link
+              onClick={() =>
-                to="/"
+                isMenuOpen ? setIsMenuOpen(false) : setIsMenuOpen(true)
-                className="text-white font-inter font-semibold hover:text-white focus:text-white tracking-normal"
+              }
-                style={{ fontSize: "1.36rem" }}
+              className={`text-5xl text-white hidden hamburger-menu cursor-pointer ${
-              >
+                isMenuOpen ? "text-blue-custom" : ""
-                Your Vehicles
+              }`}
-              </Link>
+            />
-            </li>
+            <ul
-            <li className="m-0">
+              className="list-none flex items-center justify-between m-0 navbar-list"
-              <Link
+              style={
-                to="/register"
+                isMobile
-                className="text-white font-inter font-semibold hover:text-white focus:text-white tracking-normal"
+                  ? isMenuOpen
-                style={{ fontSize: "1.36rem" }}
+                    ? { display: "flex" }
-              >
+                    : { display: "none" }
-                Register A Vehicles
+                  : { display: "flex" }
-              </Link>
+              }
-            </li>
-            <li
-              onClick={signOut}
-              className="m-0 text-white font-inter font-semibold hover:text-white focus:text-white cursor-pointer tracking-normal"
-              style={{ fontSize: "1.36rem" }}
             >
-              Sign Out
+              <li className="m-0">
-            </li>
+                <Link
-          </ul>
+                  to="/"
+                  className="text-white font-inter font-semibold hover:text-white focus:text-white tracking-normal mr-20"
+                  style={{ fontSize: "1.335rem" }}
+                >
+                  Your Vehicles
+                </Link>
+              </li>
+              <li className="m-0">
+                <Link
+                  to="/register"
+                  className="text-white font-inter font-semibold hover:text-white focus:text-white tracking-normal mr-20"
+                  style={{ fontSize: "1.335rem" }}
+                >
+                  Register A Vehicles
+                </Link>
+              </li>
+              <li
+                onClick={signOut}
+                className="m-0 text-white font-inter font-semibold hover:text-white focus:text-white cursor-pointer tracking-normal"
+                style={{ fontSize: "1.335rem" }}
+              >
+                Sign Out
+              </li>
+            </ul>
+          </>
         ) : (
           ""
         )}