Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fixed navbar responsiveness #38

Merged
merged 4 commits into from
Oct 14, 2023
Merged

fixed navbar responsiveness #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f1fe067
fixed navbar responsiveness
vashukashyap Oct 12, 2023
5e3b4e3
reviewed
vashukashyap Oct 14, 2023
6399a10
improved navbar
vashukashyap Oct 14, 2023
b231329
resolved conflict
vashukashyap Oct 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Header-section/Header-section.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,4 +129,4 @@
height: 44px;
background: #1abc9c;
}
}
}
182 changes: 161 additions & 21 deletions src/components/Header-section/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,171 @@
import { FiUser } from "react-icons/fi";
import { FiX } from "react-icons/fi";
import { Link } from "react-router-dom";
import MenuIcon from "../../assets/Icons/menu-icon.png";
import logo from "../../assets/Images/logo.png";
import { useState, useEffect } from "react";

const Navbar = () => {
const [showMenu, setShowMenu] = useState("");
const [doBlure, setDoBlure] = useState(false);

useEffect(() => {
const scrollHandler = () => {
setDoBlure(window.pageYOffset <= 30);
};
window.addEventListener("scroll", scrollHandler);

scrollHandler();

return () => {
window.removeEventListener("scroll", scrollHandler);
};
}, []);

return (
<>
<nav className="navbar flex justify-between items-center py-4 px-4 md:py-4 md:px-12">
<img className="logo" src={logo} alt="Rentalog-logo" />
<ul className="hidden md:flex">
<li className="nav-links mr-5 p-3 ">HOME</li>
<li className="nav-links mr-5 p-3">ABOUT</li>
<li className="nav-links mr-5 p-3">CONTACT</li>
<li className="nav-links p-3">RENTALS</li>
</ul>
<ul className="user-cta hidden md:flex">
<Link to="/login">
<li className="mr-5 p-2 md:p-3">Login</li>
</Link>
<Link to={"/register"}>
{" "}
<li className=" p-2 md:p-3">
<FiUser className="mr-1" />
{showMenu && (
<div className="md:hidden overflow-hidden bg-[#1ABC9C] w-full h-[70%] absolute z-40 top-0 fixed flex justify-center items-center">
<button
onClick={() => {
setShowMenu("");
}}
className="absolute top-0 left-0 m-[1.5rem]"
>
<FiX className="m-2 text-textWhite" />
</button>
<div className="text-textWhite">
<div className="px-4 bg-textWhite w-fit rounded-xl">
<img
className="self-start w-40 "
src={logo}
alt="Rentalog-logo"
/>
</div>

<div className="mt-4 h-[2px] w-600 bg-textWhite rounded-full"></div>

<div className="flex flex-col gap-8 justify-center items-center mt-10">
<div className="text-textWhite">HOME</div>
<div className="text-textWhite">CONTACT</div>
<div className="text-textWhite">ABOUT</div>
<div className="text-textWhite">RENTALS</div>
<div className="text-gray-dark">
<Link to="/login">
<button
type="button"
className="flex flex-row justify-center items-center gap-2 font-bold rounded-xl text-md px-6 py-2 text-center bg-textWhite"
>
<FiUser className="text-2xl"/>
Log In
</button>
</Link>
</div>

<div className="mt-4 h-[2px] w-600 self-stretch bg-textWhite rounded-full"></div>

<div className="text-gray-dark">
<Link to="/register">
<button
type="button"
className="flex flex-row justify-center items-center gap-2 font-bold rounded-xl text-md px-6 py-2 text-center bg-textWhite -mt-4"
>
<FiUser className="text-2xl"/>
Register
</li>
</Link>
</ul>
<img className="menu-icon md:hidden" src={MenuIcon} alt="Menu-icon" />
</button>
</Link>
</div>
</div>
</div>
</div>
)}

<nav className="bg-white fixed w-full z-20 top-0 left-0">
<div
className={
doBlure
? `absolute w-full h-full -z-20 bg-gray-light opacity-0`
: `absolute w-full h-full -z-20 bg-gray-light opacity-80`
}
></div>

<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<div className="flex flex-row justify-center items-center">
<img className="self-start w-40 " src={logo} alt="Rentalog-logo" />
</div>
<div className="flex md:order-2">
<Link to="/login">
<button
type="button"
className="hidden md:block font-bold rounded-lg text-lg px-4 py-2 text-center mr-3 md:mr-0"
>
Login
</button>
</Link>
<Link to="/register">
<button
type="button"
className="hidden md:flex flex-row justify-center items-center gap-2 font-bold rounded-xl text-md text-[#262626] px-4 py-2 text-center mr-3 md:mr-0 bg-textWhite"
>
<FiUser className="text-2xl"/>
Register
</button>
</Link>
</div>
<div
className="hidden md:flex md:w-auto md:order-1"
id="navbar-sticky"
>
<ul className="flex flex-row lg:gap-10 md:gap-6 font-medium">
<li>
<a href="#" aria-current="page">
HOME
</a>
</li>
<li>
<a href="#" aria-current="page">
ABOUT
</a>
</li>
<li>
<a href="#" aria-current="page">
CONTACT
</a>
</li>
<li>
<a href="#" aria-current="page">
RENTALS
</a>
</li>
</ul>
</div>

<button
onClick={() => {
setShowMenu("show");
}}
type="button"
className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden"
aria-controls="navbar-sticky"
aria-expanded="false"
>
<span className="sr-only">Open main menu</span>
<svg
className="w-5 h-5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 17 14"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M1 1h15M1 7h15M1 13h15"
/>
</svg>
</button>
</div>
</nav>
</>
);
Expand Down