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

apps/web/src/routes/__root.tsx

@@ -1,56 +1,14 @@
-import {
-  createRootRoute,
-  Link,
-  Outlet,
-  useNavigate,
-} from "@tanstack/react-router";
+import { createRootRoute, Outlet } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
-import { useSession, signOut } from "../lib/auth-client";
+import Navbar from "../components/navbar/NavBar";
 
 const RootLayout = () => {
-  const { data: session } = useSession();
-  const navigate = useNavigate();
-
   return (
     <>
-      <div className="p-2 flex gap-2 items-center">
-        <Link to="/" className="[&.active]:font-bold">
-          Home
-        </Link>
-        <Link to="/play" className="[&.active]:font-bold">
-          Play
-        </Link>
-        <Link to="/multiplayer" className="[&.active]:font-bold">
-          Multiplayer
-        </Link>
-        <div className="ml-auto">
-          {session ? (
-            <button
-              className="text-sm text-gray-600 hover:text-gray-900"
-              onClick={() => {
-                void signOut()
-                  .then(() => {
-                    void navigate({ to: "/" });
-                  })
-                  .catch((err) => {
-                    console.error("Sign out error:", err);
-                  });
-              }}
-            >
-              Sign out ({session.user.name})
-            </button>
-          ) : (
-            <Link
-              to="/login"
-              className="text-sm text-blue-600 hover:text-blue-800"
-            >
-              Sign in
-            </Link>
-          )}
-        </div>
-      </div>
-      <hr />
-      <Outlet />
+      <Navbar />
+      <main className="max-w-5xl mx-auto px-6 py-8">
+        <Outlet />
+      </main>
       <TanStackRouterDevtools />
     </>
   );