eCourt-Doc-Edit/web/app/app.vue

<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">
    <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 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="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-muted">…</span>
            </template>
            <template v-if="ready">
              <span v-if="isAuthenticated" class="max-w-40 truncate text-xs text-muted">
                {{ username }}
              </span>
              <button v-if="isAuthenticated" type="button" class="btn btn-secondary btn-sm" @click="logout">
                ออกจากระบบ
              </button>
              <button v-else type="button" class="btn btn-primary btn-sm" @click="login()">
                เข้าสู่ระบบ
              </button>
            </template>
          </ClientOnly>
        </nav>
      </div>
    </header>

    <main id="main" class="mx-auto max-w-6xl px-4 py-6 sm:px-6 sm:py-8">
      <NuxtPage />
    </main>
  </div>
</template>