69 lines
2.0 KiB
Vue
69 lines
2.0 KiB
Vue
<script setup>
|
||
import { useAuthStore } from "~/stores/auth-store.js";
|
||
|
||
const authStore = useAuthStore();
|
||
const isDark = ref(false);
|
||
const router = useRouter();
|
||
|
||
function toggleDark() {
|
||
isDark.value = !isDark.value;
|
||
if (isDark.value) {
|
||
document.documentElement.classList.add('dark');
|
||
localStorage.theme = 'dark';
|
||
} else {
|
||
document.documentElement.classList.remove('dark');
|
||
localStorage.theme = 'light';
|
||
}
|
||
}
|
||
|
||
function logout() {
|
||
authStore.logout()
|
||
router.push("/auth/login");
|
||
}
|
||
|
||
onMounted(() => {
|
||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||
isDark.value = true;
|
||
document.documentElement.classList.add('dark');
|
||
}
|
||
});
|
||
</script>
|
||
<template>
|
||
<nav
|
||
class="sticky top-0 z-50 flex items-center justify-between px-6 py-4 bg-white/80 backdrop-blur-md shadow-sm border-b border-gray-100">
|
||
|
||
<div class="flex items-center gap-6">
|
||
<nuxt-link to="/" class="text-sm font-medium text-gray-600 hover:text-blue-600 transition-colors duration-200"
|
||
active-class="text-blue-600 font-bold">
|
||
Home
|
||
</nuxt-link>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-4">
|
||
<button @click="toggleDark" class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700">
|
||
<span v-if="isDark">☀️</span>
|
||
<span v-else>🌙</span>
|
||
</button>
|
||
|
||
<template v-if="authStore?.token">
|
||
<label class="py-2 text-sm font-semibold">{{ authStore?.user.name }}</label>
|
||
<button @click.prevent="logout"
|
||
class="px-4 py-2 text-sm font-semibold text-red-800 bg-red-100 hover:bg-red-200 rounded-lg transition-all duration-200">
|
||
Logout
|
||
</button>
|
||
</template>
|
||
|
||
<template v-else>
|
||
<nuxt-link to="/auth/login"
|
||
class="px-5 py-2 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow-sm transition-all">
|
||
Login
|
||
</nuxt-link>
|
||
</template>
|
||
</div>
|
||
</nav>
|
||
|
||
<main class="max-w-7xl mx-auto">
|
||
<slot />
|
||
</main>
|
||
</template>
|