Makes Navbar responsive

2026-01-22 22:47:02 +00:00 · 2021-01-15 19:05:30 +03:00 · 2021-01-15 19:05:30 +03:00 · 6547178184
commit 6547178184
parent d1ae0240d1
4 changed files with 141 additions and 28 deletions
--- a/React/package-lock.json
+++ b/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",
--- a/React/package.json
+++ b/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",
--- a/React/src/index.css
+++ b/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;
+  }
+}
--- a/React/src/pages/components/Navbar.js
+++ b/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">
-              <Link
-                to="/"
-                className="text-white font-inter font-semibold hover:text-white focus:text-white tracking-normal"
-                style={{ fontSize: "1.36rem" }}
-              >
-                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"
-                style={{ fontSize: "1.36rem" }}
-              >
-                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.36rem" }}
+          <>
+            <IoMdMenu
+              onClick={() =>
+                isMenuOpen ? setIsMenuOpen(false) : setIsMenuOpen(true)
+              }
+              className={`text-5xl text-white hidden hamburger-menu cursor-pointer ${
+                isMenuOpen ? "text-blue-custom" : ""
+              }`}
+            />
+            <ul
+              className="list-none flex items-center justify-between m-0 navbar-list"
+              style={
+                isMobile
+                  ? isMenuOpen
+                    ? { display: "flex" }
+                    : { display: "none" }
+                  : { display: "flex" }
+              }
            >
-              Sign Out
-            </li>
-          </ul>
+              <li className="m-0">
+                <Link
+                  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>
+          </>
        ) : (
          ""
        )}