77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
import { useState } from "react";
|
|
import { useLocation, useNavigate } from "react-router";
|
|
import client from "~/api/client";
|
|
import { useUserStore } from "~/hooks/user";
|
|
|
|
export default function NavBar() {
|
|
const location = useLocation().pathname;
|
|
const user = useUserStore((state) => state.user);
|
|
const setUser = useUserStore((state) => state.setUser);
|
|
const [popupOpen, setPopupOpen] = useState(false);
|
|
const navigate = useNavigate();
|
|
|
|
function handleProfileClick() {
|
|
if (user) {
|
|
setPopupOpen(!popupOpen);
|
|
} else {
|
|
navigate("/login");
|
|
}
|
|
}
|
|
|
|
async function handleLogout() {
|
|
const [_, status] = await client.POST("/logout", {
|
|
token: user ? user.token : "",
|
|
});
|
|
setUser(null);
|
|
}
|
|
|
|
return (
|
|
<div className="flex justify-between p-2">
|
|
<div className="flex space-x-4">
|
|
<a
|
|
onClick={() => navigate("/")}
|
|
className={
|
|
"border-2 white rounded-md px-2 py-1" +
|
|
(location === "/" ? " bg-gray-500" : "")
|
|
}
|
|
>
|
|
Home
|
|
</a>
|
|
</div>
|
|
<button
|
|
onClick={handleProfileClick}
|
|
className="border-2 white rounded-md px-2 py-1"
|
|
>
|
|
{user ? user.username : "Login"}
|
|
{popupOpen ? (
|
|
<>
|
|
<div
|
|
className="w-screen h-screen absolute top-0 left-0 z-[99]"
|
|
onClick={() => {
|
|
setPopupOpen(!popupOpen);
|
|
}}
|
|
></div>
|
|
<div className="absolute mt-3 -ml-14 bg-red-600 flex flex-col rounded-md justify-center items-center z-[100] space-y-0.5 w-25 py-1">
|
|
<a className="px-2 py-1 hover:bg-blue-400 w-[90%] rounded-md">
|
|
Profile
|
|
</a>
|
|
<a className="px-2 py-1 hover:bg-blue-400 w-[90%] rounded-md">
|
|
Settings
|
|
</a>
|
|
<div className="bg-amber-300 w-[90%] h-[2px] rounded-md"></div>
|
|
<a
|
|
onClick={handleLogout}
|
|
className="px-2 py-1 hover:bg-blue-400 w-[90%] rounded-md"
|
|
>
|
|
Logout
|
|
</a>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|