Created navbar

2025-03-17 22:29:37 +01:00
parent 967211565b
commit c2c387648f
1 changed files with 76 additions and 0 deletions
--- a/app/components/navbar.tsx
+++ b/app/components/navbar.tsx
@@ -0,0 +1,76 @@
+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>
+  );
+}