64 lines
2 KiB
Vue
64 lines
2 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"
|
|
>
|
|
Ghost Guild Wiki
|
|
</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>
|