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 2 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
Binary file added src/assets/Icons/icon-outline-person.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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;
}
}
}
161 changes: 143 additions & 18 deletions src/components/Header-section/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,153 @@
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 PersonIcon from "../../assets/Icons/icon-outline-person.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>
<li className=" p-2 md:p-3">
<FiUser className="mr-1" />
Register
</li>
</ul>
<img className="menu-icon md:hidden" src={MenuIcon} alt="Menu-icon" />
{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-[1px] w-600 bg-[#F8F8F8] 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>
</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">
<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>

<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>
<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-1 text-center mr-3 md:mr-0 bg-textWhite"
>
<img className="h-6" src={PersonIcon} alt="not available" />
Sign In
</button>
<Link to="/login">
<button
type="button"
className="md:hidden flex flex-row justify-center items-center gap-2 font-bold rounded-xl text-sm px-4 py-2 text-center bg-textWhite"
>
<img className="h-6" src={PersonIcon} alt="not available" />
Log In
</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">
Contact
</a>
</li>
<li>
<a href="#" aria-current="page">
About
</a>
</li>
</ul>
</div>
</div>
</nav>
</>
);
Expand Down