Skip to content

Fix [BUG] Navbar menu link not visible #694 #715

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

Merged
merged 1 commit into from
Apr 6, 2025
+109 −118
Merged

Fix [BUG] Navbar menu link not visible #694 #715

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
21 changes: 11 additions & 10 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

75 changes: 37 additions & 38 deletions src/components/Header-section/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ const Navbar = () => {
return newMode;
});
document.body.classList.toggle("dark", !dark);
alert("showMenu:", showMenu);
};

useEffect(() => {
Expand All @@ -43,33 +42,33 @@ const Navbar = () => {
};

return (
<nav className='fixed w-screen z-20 top-0 left-0 backdrop-blur-lg'>
<nav className="fixed w-screen z-20 top-0 left-0 backdrop-blur-lg">
<ProgressBar />
<div className='max-w-screen-xl w-50 flex items-center justify-between mx-auto p-2 text-sm'>
<div className='flex flex-row items-center'>
<a href='#home' aria-current='page'>
<div className="max-w-screen-xl w-50 flex items-center justify-between mx-auto p-2 text-sm">
<div className="flex flex-row items-center">
<a href="#home" aria-current="page">
<img
className='self-start navbar my-auto'
className="self-start navbar my-auto"
style={{ height: "70px", width: "15rem" }}
src={logo}
alt='Rentalog-logo'
alt="Rentalog-logo"
/>
</a>
</div>

{/* Nav Items for desktop*/}
<div className={`hidden lg:block`}>
<div className={` flex space-x-4 `}>
<a className='cursor-pointer hover:scale-105 ' href='/'>
<a className="cursor-pointer hover:scale-105 " href="/">
Home
</a>
<a className='cursor-pointer hover:scale-105 ' href='#Service'>
<a className="cursor-pointer hover:scale-105 " href="#Service">
Rentals
</a>
<a className='cursor-pointer hover:scale-105 ' href='#AboutUs'>
<a className="cursor-pointer hover:scale-105 " href="#AboutUs">
About
</a>
<a className='cursor-pointer hover:scale-105 ' href='#ContactUs'>
<a className="cursor-pointer hover:scale-105 " href="#ContactUs">
Contact
</a>
</div>
Expand All @@ -81,66 +80,66 @@ const Navbar = () => {
>
<div className={` flex flex-col space-y-6 `}>
<a
className='cursor-pointer hover:scale-105 '
href='/'
className="cursor-pointer hover:scale-105 "
href="/"
onClick={() => setShowMenu("")}
>
Home
</a>
<a
className='cursor-pointer hover:scale-105 '
href='#Service'
className="cursor-pointer hover:scale-105 "
href="#Service"
onClick={() => setShowMenu("")}
>
Rentals
</a>
<a
className='cursor-pointer hover:scale-105 '
href='#AboutUs'
className="cursor-pointer hover:scale-105 "
href="#AboutUs"
onClick={() => setShowMenu("")}
>
About
</a>
<a
className='cursor-pointer hover:scale-105 '
href='#ContactUs'
className="cursor-pointer hover:scale-105 "
href="#ContactUs"
onClick={() => setShowMenu("")}
>
Contact
</a>
</div>
</div>

<div className='flex items-center space-x-2 md:space-x-4'>
<button onClick={toggleDarkMode} className='text-lg'>
<div className="flex items-center space-x-2 md:space-x-4">
<button onClick={toggleDarkMode} className="text-lg">
{dark ? <FiSun /> : <FiMoon />}
</button>

{checkToken ? (
<Link to='/'>
<Link to="/">
<button
onClick={handleLogout}
className='navbar3 hidden md:block text-sm px-4 py-1 rounded-lg bg-green-500 text-white transition-transform hover:scale-105'
className="navbar3 hidden md:block text-sm px-4 py-1 rounded-lg bg-green-500 text-white transition-transform hover:scale-105"
>
Logout
</button>
</Link>
) : (
<>
<Link to='/login'>
<Link to="/login">
<button
onClick={playSound}
className='navbar3 hidden md:block text-sm px-4 py-1 rounded-lg bg-green-500 text-white transition-transform hover:scale-105'
className="navbar3 hidden md:block text-sm px-4 py-1 rounded-lg bg-green-500 text-white transition-transform hover:scale-105"
>
Login
</button>
</Link>
<Link to='/register'>
<Link to="/register">
<button
onClick={playSound}
className='navbar3 hidden md:flex items-center gap-1 px-4 py-1 text-sm rounded-lg bg-green-500 text-white transition-transform hover:scale-105'
className="navbar3 hidden md:flex items-center gap-1 px-4 py-1 text-sm rounded-lg bg-green-500 text-white transition-transform hover:scale-105"
>
<FiUser className='text-lg' />
<FiUser className="text-lg" />
Register
</button>
</Link>
Expand All @@ -154,21 +153,21 @@ const Navbar = () => {
onClick={() =>
showMenu === "show" ? setShowMenu("") : setShowMenu("show")
}
type='button'
className='md:hidden p-2'
type="button"
className="md:hidden p-2"
>
<svg
className='w-4 h-4'
aria-hidden='true'
fill='none'
viewBox='0 0 17 14'
className="w-4 h-4"
aria-hidden="true"
fill="none"
viewBox="0 0 17 14"
>
<path
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d='M1 1h15M1 7h15M1 13h15'
d="M1 1h15M1 7h15M1 13h15"
/>
</svg>
</button>
Expand Down
67 changes: 27 additions & 40 deletions src/components/Header-section/RentNavbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,14 @@ const RentNavbar = ({ darkMode, toggleDarkMode }) => {
const [activeSection, setActiveSection] = useState("home"); // Track active section

if (showMenu) {

return (
<>
<div className="md:hidden bg-[#1ABC9C] fixed w-full z-20 top-0 left-0 h-full flex justify-center items-center">
<ProgressBar/>
<ProgressBar />
<button
// onClick={() => {
// setShowMenu("");
// }}
onClick={() => {
setShowMenu("");
}}
className="absolute top-0 left-0 m-[1.5rem]"
>
<FiX className="m-2 text-textWhite" />
Expand All @@ -44,9 +43,9 @@ const RentNavbar = ({ darkMode, toggleDarkMode }) => {
<a href="#home" aria-current="page">
<div
className="text-textWhite "
// onClick={() => {
// setShowMenu("");
// }}
onClick={() => {
setShowMenu("");
}}
>
HOME
</div>
Expand All @@ -55,51 +54,39 @@ const RentNavbar = ({ darkMode, toggleDarkMode }) => {
<a href="#Service" aria-current="page">
<div
className="text-textWhite "
// onClick={() => {
// setShowMenu("");
// }}
>

</div>
onClick={() => {
setShowMenu("");
}}
></div>
</a>
<a href="#AboutUs" aria-current="page">
<div
className="text-textWhite "
// onClick={() => {
// setShowMenu("");
// }}
onClick={() => {
setShowMenu("");
}}
>
ABOUT
</div>
</a>
<a href="#ContactUs" aria-current="page">
<div
className="text-textWhite "
// onClick={() => {
// setShowMenu("");
// }}
onClick={() => {
setShowMenu("");
}}
>
CONTACT
</div>
</a>
<a href="#FAQ" aria-current="page">
<div
className="text-textWhite"
// onClick={() => {
// setShowMenu("");
// }}
>
FAQ
</div>
</a>
<a href="/" aria-current="page">
<div
className="text-textWhite"
// onClick={() => {
// setShowMenu("");
// }}
onClick={() => {
setShowMenu("");
}}
>
FAQ
FAQ
</div>
</a>
<div className="text-gray-dark">
Expand Down Expand Up @@ -133,7 +120,7 @@ const RentNavbar = ({ darkMode, toggleDarkMode }) => {
</div>
</>
);
}
}

return (
<>
Expand Down Expand Up @@ -202,7 +189,7 @@ const RentNavbar = ({ darkMode, toggleDarkMode }) => {
>
<ul className="flex flex-row lg:gap-10 md:gap-6 font-medium">
<li className=" navbar2 hover:scale-[1.081] hover transition duration-300">
<HashLink smooth to="/#home" aria-current="page">
<HashLink smooth to="/#home" aria-current="page">
{activeSection === "home" ? (
<h1 className="text-green">HOME</h1>
) : (
Expand All @@ -212,7 +199,7 @@ const RentNavbar = ({ darkMode, toggleDarkMode }) => {
</li>

<li className="navbar2 hover:scale-[1.081] hover transition duration-300">
<HashLink smooth to="/#Service" aria-current="page">
<HashLink smooth to="/#Service" aria-current="page">
{activeSection === "Service" ? (
<h1 className="text-green">RENTALS</h1>
) : (
Expand All @@ -222,7 +209,7 @@ const RentNavbar = ({ darkMode, toggleDarkMode }) => {
</li>

<li className="navbar2 hover:scale-[1.081] hover transition duration-300">
<HashLink smooth to="/#AboutUs" aria-current="page">
<HashLink smooth to="/#AboutUs" aria-current="page">
{activeSection === "AboutUs" ? (
<h1 className="text-green">ABOUT</h1>
) : (
Expand All @@ -232,7 +219,7 @@ const RentNavbar = ({ darkMode, toggleDarkMode }) => {
</li>

<li className="navbar2 hover:scale-[1.081] hover transition duration-300">
<HashLink smooth to="/#ContactUs" aria-current="page">
<HashLink smooth to="/#ContactUs" aria-current="page">
{activeSection === "ContactUs" ? (
<h1 className="text-green">CONTACT</h1>
) : (
Expand All @@ -241,7 +228,7 @@ const RentNavbar = ({ darkMode, toggleDarkMode }) => {
</HashLink>
</li>
<li className="hover:scale-[1.081] hover transition duration-300">
<HashLink smooth to="/#FAQ" aria-current="page">
<HashLink smooth to="/#FAQ" aria-current="page">
{activeSection === "FAQ" ? (
<h1 className="text-green">FAQ</h1>
) : (
Expand Down
Loading
Loading