fix: turn user menu to client

app/layout.tsx

@@ -7,11 +7,10 @@ import {
 } from "nextra-theme-docs";
 import { Banner as NextraBanner, Head } from "nextra/components";
 import { getPageMap } from "nextra/page-map";
-import { Suspense, type ReactNode } from "react";
+import { type ReactNode } from "react";
 import { SessionProvider } from "next-auth/react";
 import { ThemeConfigProps } from "node_modules/nextra-theme-docs/dist/layout.mjs";
 import { UserMenu } from "lib/components/navigation/UserMenu";
-import { Loading } from "lib/components/animations/Loading";
 import { Toaster } from "react-hot-toast";
 import { Footer } from "lib/components/navigation/Footer";
 import { Analytics } from "lib/components/Analytics";
@@ -44,10 +43,8 @@ const COLOR = {
 
 export const viewport: Viewport = Head.viewport;
 
-export const dynamic = "force-dynamic";
-
 export const metadata: Metadata = {
-    description: "Make beautiful websites with Next.js & MDX.",
+    description: "sPhil",
     metadataBase: new URL(SITE_ROOT),
     keywords: [
         "sphil",
@@ -154,9 +151,7 @@ export default async function RootLayout({
                                 projectLink={PROJECT_LINK}
                             >
                                 <div className="w-[70px] flex justify-center">
-                                    <Suspense fallback={<Loading.RingMd />}>
-                                        <UserMenu />
-                                    </Suspense>
+                                    <UserMenu />
                                 </div>
                             </NextraNavbar>
                         }

lib/components/auth/SignInButtonClient.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { signIn } from "next-auth/react";
+import { cn } from "lib/utils";
+
+export function SignInButtonClient({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLButtonElement>) {
+    return (
+        <button
+            type="submit"
+            onClick={() => signIn()}
+            className={cn("", className)}
+            {...props}
+        >
+            Sign in
+        </button>
+    );
+}

lib/components/auth/SignOutButtonClient.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { cn } from "lib/utils";
+import { signOut } from "next-auth/react";
+
+export function SignOutButtonClient({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLButtonElement>) {
+    return (
+        <button
+            type="submit"
+            onClick={() => signOut()}
+            className={cn("", className)}
+            {...props}
+        >
+            Sign Out
+        </button>
+    );
+}

lib/components/navigation/UserMenu.tsx

@@ -1,14 +1,21 @@
-import { auth } from "lib/auth/authConfig";
-import { SignInButton } from "../auth/SignInButton";
+"use client";
+
+import { useSession } from "next-auth/react";
 import Link from "next/link";
-import { SignOutButton } from "../auth/SignOutButton";
 import { FadeIn } from "../animations/FadeIn";
+import { Loading } from "../animations/Loading";
+import { SignInButtonClient } from "../auth/SignInButtonClient";
+import { SignOutButtonClient } from "../auth/SignOutButtonClient";
+
+export function UserMenu() {
+    const { data: session, status } = useSession();
 
-export async function UserMenu() {
-    const session = await auth();
+    if (status === "loading") {
+        return <Loading.RingMd />;
+    }
 
-    if (!session?.user) {
-        return <SignInButton className="btn btn-primary btn-sm" />;
+    if (status === "unauthenticated") {
+        return <SignInButtonClient className="btn btn-primary btn-sm" />;
     }
 
     return (
@@ -66,7 +73,7 @@ export async function UserMenu() {
                 </li>
                 <li className="border-t my-1" />
                 <li className="dark:hover:bg-acid-green/50 rounded-md duration-75 transition-colors">
-                    <SignOutButton className="w-[157px] flex" />
+                    <SignOutButtonClient className="w-[157px] flex" />
                 </li>
             </ul>
         </div>