59 lines
2.4 KiB
Vue
59 lines
2.4 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">
|
||
<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>
|