Skip to content

Commit

Permalink
Merge pull request Anjaliavv51#38 from vashukashyap/fixed-Navbar-resp…
Browse files Browse the repository at this point in the history 
…onsivenes

fixed navbar responsiveness
  • Loading branch information
@gauravsingh1281
gauravsingh1281 authored Oct 14, 2023
2 parents f8cc301 + b231329 commit 9b2727c
Show file tree
Hide file tree
Showing 2 changed files with 162 additions and 22 deletions.
2 changes: 1 addition & 1 deletion src/components/Header-section/Header-section.css
View file
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
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

0 comments on commit 9b2727c

Please sign in to comment.