ปรับ look and feel

web/app/app.vue

@@ -6,59 +6,44 @@ 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="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 class="min-h-screen">
+    <a
+      href="#main"
+      class="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded-pill focus:bg-primary focus:px-4 focus:py-2 focus:text-on-primary"
+    >
+      ข้ามไปยังเนื้อหา
+    </a>
+
+    <header class="sticky top-0 z-20 border-b border-line bg-elevated/95 backdrop-blur">
+      <div class="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-x-4 gap-y-2 px-4 py-3 sm:px-6">
+        <div class="flex min-w-0 items-baseline gap-3">
+          <NuxtLink to="/" class="min-w-0 truncate text-lg font-semibold hover:text-primary">
+            e-Court Documents Versioning
+          </NuxtLink>
+          <span class="badge badge-accent hidden sm:inline-flex">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>
+        <nav class="flex flex-wrap items-center gap-2 text-sm">
+          <NuxtLink to="/" class="nav-link">สร้างเอกสาร</NuxtLink>
+          <NuxtLink to="/templates" class="nav-link">จัดการ 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"
-          >
+          <button type="button" class="btn btn-secondary btn-sm" @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>
+              <span class="inline-block w-24 text-right text-xs text-muted">…</span>
             </template>
             <template v-if="ready">
-              <span v-if="isAuthenticated" class="max-w-40 truncate text-xs text-slate-500 dark:text-slate-400">
+              <span v-if="isAuthenticated" class="max-w-40 truncate text-xs text-muted">
                 {{ 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 v-if="isAuthenticated" type="button" class="btn btn-secondary btn-sm" @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 v-else type="button" class="btn btn-primary btn-sm" @click="login()">
                 เข้าสู่ระบบ
               </button>
             </template>
@@ -67,7 +52,7 @@ onMounted(() => initTheme())
       </div>
     </header>
 
-    <main class="mx-auto max-w-5xl p-6">
+    <main id="main" class="mx-auto max-w-6xl px-4 py-6 sm:px-6 sm:py-8">
       <NuxtPage />
     </main>
   </div>