45 lines
No EOL
1.7 KiB
Vue
45 lines
No EOL
1.7 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
|
|
<!-- Navigation -->
|
|
<nav class="bg-white dark:bg-gray-800 shadow">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-16">
|
|
<div class="flex items-center">
|
|
<NuxtLink to="/" class="text-xl font-bold text-gray-900 dark:text-white">
|
|
Wiki.GhostGuild
|
|
</NuxtLink>
|
|
<div class="ml-10 flex space-x-4">
|
|
<NuxtLink to="/articles" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md">
|
|
Articles
|
|
</NuxtLink>
|
|
<NuxtLink v-if="isAuthenticated" to="/articles/new" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md">
|
|
New Article
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-4">
|
|
<div v-if="isAuthenticated" class="flex items-center space-x-4">
|
|
<span class="text-gray-700 dark:text-gray-300">{{ user?.displayName }}</span>
|
|
<button @click="logout" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
|
|
Logout
|
|
</button>
|
|
</div>
|
|
<button v-else @click="login" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
|
|
Login
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { user, isAuthenticated, login, logout } = useAuth()
|
|
</script> |