feat(navbar): add modular navbar components and color variables

apps/web/src/components/navbar/NavLogout.tsx

@@ -0,0 +1,26 @@
+import { useNavigate } from "@tanstack/react-router";
+import { signOut } from "../../lib/auth-client";
+
+type NavLogoutProps = { name: string };
+
+const NavLogout = ({ name }: NavLogoutProps) => {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    void signOut()
+      .then(() => void navigate({ to: "/" }))
+      .catch((err) => console.error("logout error:", err));
+  };
+
+  return (
+    <button
+      onClick={handleLogout}
+      className="text-sm text-(--color-text-muted) transition-colors duration-200
+        hover:text-(--color-primary)"
+    >
+      logout <span className="text-(--color-accent)">{name}</span>
+    </button>
+  );
+};
+
+export default NavLogout;