refactor: add useLocation hook to Navbar component

This commit is contained in:
ALi Josheghani
2024-09-14 22:02:36 +03:30
parent c565ffc8cb
commit de99e296b8

View File

@@ -5,12 +5,13 @@ import MobileMenu from "./MobileMenu";
import NavbarLink from "./NavbarLink"; import NavbarLink from "./NavbarLink";
import router from "../../../../routes/routes"; import router from "../../../../routes/routes";
import Button from "../../../button"; import Button from "../../../button";
import { useNavigate } from "react-router-dom"; import { useLocation, useNavigate } from "react-router-dom";
import { Route } from "../../../../types/props"; import { Route } from "../../../../types/props";
import { IsAuthenticated } from "../../../../utils/auth"; import { IsAuthenticated } from "../../../../utils/auth";
const Navbar = ({ extra }: { extra?: string }) => { const Navbar = ({ extra }: { extra?: string }) => {
const [isOpen, setIsOpen] = useState<boolean>(false); const [isOpen, setIsOpen] = useState<boolean>(false);
const location = useLocation();
const auth = IsAuthenticated(); const auth = IsAuthenticated();
const [routes] = useState<Route[]>(router); const [routes] = useState<Route[]>(router);
const navigate = useNavigate(); const navigate = useNavigate();
@@ -29,7 +30,9 @@ const Navbar = ({extra}:{extra?:string}) => {
return ( return (
<div className="relative"> <div className="relative">
<nav className={`glass text-white p-4 flex justify-between items-center ${extra}`}> <nav
className={`glass text-white p-4 flex justify-between items-center ${extra}`}
>
<div className="flex items-center"> <div className="flex items-center">
<h1 className="text-xl font-bold">پرشین پینگ</h1> <h1 className="text-xl font-bold">پرشین پینگ</h1>
</div> </div>
@@ -43,7 +46,9 @@ const Navbar = ({extra}:{extra?:string}) => {
); );
})} })}
</div> </div>
{auth ? ( {location?.pathname === "/profile" ? (
<Button onClick={() => navigate("/")}>فروشگاه</Button>
) : auth ? (
<Button onClick={() => navigate("/profile")}>صفحه کاربری</Button> <Button onClick={() => navigate("/profile")}>صفحه کاربری</Button>
) : ( ) : (
<Button onClick={() => navigate("/login")}>ورود یا ثبت نام</Button> <Button onClick={() => navigate("/login")}>ورود یا ثبت نام</Button>