From 19d09285890c77ce477f4ec2533f489f12ebd4b3 Mon Sep 17 00:00:00 2001 From: Vazhin Tayeb Date: Fri, 15 Jan 2021 19:05:30 +0300 Subject: [PATCH] Makes Navbar responsive --- React/package-lock.json | 34 ++++++++++++ React/package.json | 1 + React/src/index.css | 52 ++++++++++++++++++ React/src/pages/components/Navbar.js | 82 ++++++++++++++++++---------- 4 files changed, 141 insertions(+), 28 deletions(-) diff --git a/React/package-lock.json b/React/package-lock.json index f58fb28..1302b0c 100644 --- 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", diff --git a/React/package.json b/React/package.json index 078bd39..1a2564e 100644 --- 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", diff --git a/React/src/index.css b/React/src/index.css index efc2359..1b632c3 100644 --- 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; + } +} diff --git a/React/src/pages/components/Navbar.js b/React/src/pages/components/Navbar.js index f733395..e87464f 100644 --- 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" }} > -