mirror of
https://github.com/ditkrg/AuthorizationServerDemos.git
synced 2026-01-22 22:47:02 +00:00
Makes Navbar responsive
This commit is contained in:
Vazhin Tayeb
Muhammad Azeez
parent
ac1d8eef3a
commit
19d0928589
34
React/package-lock.json
generated
34
React/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user