62 lines
2.1 KiB
Vue
62 lines
2.1 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-white text-neutral-900">
|
|
<header class="w-full border-b border-neutral-200 bg-primary-500">
|
|
<div class="flex w-full items-center px-6 py-4">
|
|
<NuxtLink to="/" class="flex items-center gap-3">
|
|
<span
|
|
class="flex items-center justify-center bg-white text-xl font-bold uppercase text-primary-500 p-4"
|
|
>
|
|
LOGO
|
|
</span>
|
|
</NuxtLink>
|
|
<nav class="mx-8 flex flex-1 gap-8 text-2xl font-bold uppercase text-white">
|
|
<NuxtLink to="/" custom v-slot="{ href, navigate, isExactActive }">
|
|
<a
|
|
:href="href"
|
|
@click="navigate"
|
|
:class="isExactActive ? 'opacity-100' : 'opacity-50'"
|
|
>
|
|
Accueil
|
|
</a>
|
|
</NuxtLink>
|
|
<NuxtLink to="/reception" custom v-slot="{ href, navigate, isActive }">
|
|
<a
|
|
:href="href"
|
|
@click="navigate"
|
|
:class="isReceptionActive ? 'opacity-100' : 'opacity-50'"
|
|
>
|
|
Reception
|
|
</a>
|
|
</NuxtLink>
|
|
</nav>
|
|
<button
|
|
type="button"
|
|
class="ml-auto text-xl font-bold uppercase text-white transition hover:opacity-80"
|
|
@click="handleLogout"
|
|
>
|
|
Déconnexion
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<main class="mx-auto w-full max-w-[1050px] px-6 pt-[90px] pb-0">
|
|
<slot/>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useAuthStore } from '~/stores/auth'
|
|
|
|
const route = useRoute()
|
|
const auth = useAuthStore()
|
|
const isReceptionActive = computed(() => route.path.startsWith('/reception'))
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await auth.logout()
|
|
} finally {
|
|
await navigateTo('/login')
|
|
}
|
|
}
|
|
</script>
|