phase 6 เบื้องต้น

web/app/app.vue

@@ -1,22 +1,73 @@
 <script setup lang="ts">
 const { initTheme, toggle, isDark } = useTheme()
+const { ready, isAuthenticated, username, login, logout } = useAuth()
 
 onMounted(() => initTheme())
 </script>
 
 <template>
   <div class="min-h-screen bg-slate-50 text-slate-900 dark:bg-slate-900 dark:text-slate-100">
-    <header class="flex items-center justify-between border-b border-slate-200 px-6 py-4 dark:border-slate-700">
-      <NuxtLink to="/" class="text-lg font-semibold">Word Versioning</NuxtLink>
-      <button
-        type="button"
-        class="rounded-md border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-100 dark:border-slate-600 dark:hover:bg-slate-800"
-        @click="toggle"
-      >
-        {{ isDark ? '☀️ Light' : '🌙 Dark' }}
-      </button>
+    <header class="border-b border-slate-200 dark:border-slate-700">
+      <div class="mx-auto flex max-w-5xl flex-wrap items-center justify-between gap-3 px-6 py-4">
+        <div class="flex items-baseline gap-3">
+          <NuxtLink to="/" class="text-lg font-semibold">e-Court Documents Versioning</NuxtLink>
+          <span class="hidden text-xs text-slate-500 dark:text-slate-400 sm:inline">web portal</span>
+        </div>
+
+        <nav class="flex items-center gap-2 text-sm">
+          <NuxtLink
+            to="/"
+            class="rounded-md px-2.5 py-1.5 text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
+          >
+            สร้างเอกสาร
+          </NuxtLink>
+          <NuxtLink
+            to="/templates"
+            class="rounded-md px-2.5 py-1.5 text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
+          >
+            จัดการ template
+          </NuxtLink>
+
+          <button
+            type="button"
+            class="rounded-md border border-slate-300 px-3 py-1.5 hover:bg-slate-100 dark:border-slate-600 dark:hover:bg-slate-800"
+            @click="toggle"
+          >
+            {{ isDark ? '☀️ Light' : '🌙 Dark' }}
+          </button>
+
+          <!-- สถานะ login รู้ผลหลัง restore session (client) — จึงต้อง ClientOnly กัน hydration mismatch -->
+          <ClientOnly>
+            <template #fallback>
+              <span class="inline-block w-24 text-right text-xs text-slate-400">…</span>
+            </template>
+            <template v-if="ready">
+              <span v-if="isAuthenticated" class="max-w-40 truncate text-xs text-slate-500 dark:text-slate-400">
+                {{ username }}
+              </span>
+              <button
+                v-if="isAuthenticated"
+                type="button"
+                class="rounded-md border border-slate-300 px-3 py-1.5 hover:bg-slate-100 dark:border-slate-600 dark:hover:bg-slate-800"
+                @click="logout"
+              >
+                ออกจากระบบ
+              </button>
+              <button
+                v-else
+                type="button"
+                class="rounded-md bg-sky-600 px-3 py-1.5 font-medium text-white hover:bg-sky-700"
+                @click="login()"
+              >
+                เข้าสู่ระบบ
+              </button>
+            </template>
+          </ClientOnly>
+        </nav>
+      </div>
     </header>
-    <main class="mx-auto max-w-3xl p-6">
+
+    <main class="mx-auto max-w-5xl p-6">
       <NuxtPage />
     </main>
   </div>