Using a library to make a navbar , i am clicking the logout button but it displays homepage after clicking and not the log inside the callback function passed in onClick .
import hcOffcanvasNav from "hc-offcanvas-nav";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import {
DarkHomeInviteFriendsIcon,
DarkHomeLogoutIcon,
DarkHomeMenuIcon,
DarkHomeNotificationsIcon,
DarkHomeSettingsIcon,
DarkHomeTripIcon,
DarkHomeWalletIcon,
DarkImgProfileImage,
HomeInviteFriendsIcon,
HomeLogoutIcon,
HomeMenuIcon,
HomeNotificationsIcon,
HomeSettingsIcon,
HomeTripIcon,
HomeWalletIcon,
ImgProfileImage,
} from "../../../assets/TaxiModeImage";
import { Link } from "react-router-dom";
const Navigation = ({ setLogoutModal }) => {
const themeGetter = useSelector((state) => state.theme);
const [isMenuOpen, setIsMenuOpen] = useState(false);
console.log("in navigation");
useEffect(() => {
const Nav = new hcOffcanvasNav("#main-nav", {
customToggle: ".toggle",
open: isMenuOpen,
swipeGestures: false,
});
return () => Nav.close();
}, [isMenuOpen]);
const toggleMenu = () => {
setIsMenuOpen((prev) => !prev);
};
const handleClick = () => {
console.log("Logout button clicked");
};
return (
<nav id="main-nav">
<ul className="second-nav">
<li>
<Link className="sidebar-user d-flex align-items-center p-3 border-0 mb-0 rounded-4">
<img
src={themeGetter ? DarkImgProfileImage : ImgProfileImage}
className="rounded-pill me-3 ch-50"
alt="#"
/>
<div>
<h4
className={`mb-0 ${
themeGetter ? "txt-white-dark" : "tm-secondary-txt-color"
} roboto-text`}
>
Hello, Brayden
</h4>
<small className="tm-primary-txt-color roboto-text">
Edit account
</small>
<br />
</div>
</Link>
</li>
...
<ul className="bottom-nav">
<li>
<Link
className="txt-logout"
onClick={() => {
console.log("click");
}}
>
{themeGetter ? (
<DarkHomeLogoutIcon className="me-3" />
) : (
<HomeLogoutIcon className="me-3" />
)}
<span className="txt-logout" onClick={handleClick}>
Logout
</span>
</Link>
</li>
</ul>
</nav>
);
};
export default Navigation;
i tried to log the ‘click’ but it didn’t happened , i want to know that is this the library or css or code problem because if the code is normal then it should be logged but it doesn’t.