74 lines
2.8 KiB
Vue
74 lines
2.8 KiB
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 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>
|
|
|
|
<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-5xl p-6">
|
|
<NuxtPage />
|
|
</main>
|
|
</div>
|
|
</template>
|