feat: add theme toggle component with dropdown menu support to the layout

app/form/layout.tsx

@@ -3,6 +3,8 @@ import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import { FormLayoutClient } from "./client";
 import LoginDialog from "@/components/login-dialog";
 import { Metadata } from "next";
+import { ThemeToggle } from "@/components/theme-toggle";
+import Link from 'next/link';
 
 const siteUrl = process.env.BASE_URL;
 
@@ -38,17 +40,22 @@ export default async function FormLayout({
   const session = await getServerSession(authOptions);
 
   return (
-    <div className="flex min-h-screen flex-col flex-1 w-full bg-background text-foreground dark">
+    <div className="flex min-h-screen flex-col flex-1 w-full bg-background text-foreground">
       <header className="border-b border-border px-6 py-3 flex items-center justify-between shrink-0">
-        <span className="font-semibold text-sm">
-          ฟอร์ม
-        </span>
-        {session?.user && (
-          <FormLayoutClient
-            userName={session.user.name ?? ""}
-            userImage={session.user.image ?? ""}
-          />
-        )}
+        <Link href="/form">
+          <span className="font-semibold text-sm">
+            Form
+          </span>
+        </Link>
+        <div className="flex items-center gap-2">
+          {session?.user && (
+            <FormLayoutClient
+              userName={session.user.name ?? ""}
+              userImage={session.user.image ?? ""}
+            />
+          )}
+          <ThemeToggle />
+        </div>
       </header>
       <main className="flex-1 p-6 md:p-8 overflow-y-auto max-w-6xl mx-auto w-full">
         {children}