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

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

@@ -0,0 +1,40 @@
+import { Link, useNavigate } from "@tanstack/react-router";
+import { useSession, signOut } from "../../lib/auth-client";
+
+const NavAuth = () => {
+  const { data: session } = useSession();
+  const navigate = useNavigate();
+
+  const handleSignOut = () => {
+    void signOut()
+      .then(() => void navigate({ to: "/" }))
+      .catch((err) => console.error("Sign out error:", err));
+  };
+
+  return (
+    <div className="ml-auto">
+      {session ? (
+        <button
+          onClick={handleSignOut}
+          className="text-sm text-(--color-text-muted) transition-colors duration-200
+            hover:text-(--color-primary)"
+        >
+          Sign out{" "}
+          <span className="text-(--color-accent)">{session.user.name}</span>
+        </button>
+      ) : (
+        <Link
+          to="/login"
+          className="text-sm font-medium px-4 py-1.5 rounded-full
+            text-white bg-(--color-primary)
+            hover:bg-(--color-primary-dark)
+            transition-colors duration-200"
+        >
+          Sign in
+        </Link>
+      )}
+    </div>
+  );
+};
+
+export default NavAuth;