96 lines
3.4 KiB
Vue
96 lines
3.4 KiB
Vue
<template>
|
|
<header class="bg-background dark:bg-background shadow-md shadow-background-100 dark:shadow-background-50">
|
|
<nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Menu global">
|
|
<div class="flex lg:flex-1">
|
|
<RouterLink to="/" class="-m-1.5 p-1.5">
|
|
<span class="sr-only">GéJDR</span>
|
|
<UiLogo class="h-10 w-auto" />
|
|
</RouterLink>
|
|
</div>
|
|
<!-- Mobile menu opener -->
|
|
<div class="flex lg:hidden">
|
|
<UButton
|
|
type="button"
|
|
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5"
|
|
variant="ghost"
|
|
@click="openMenu"
|
|
>
|
|
<span class="sr-only">Ouvrir le menu principal</span>
|
|
<UiIconsMenu class="size-6 text-text-800" />
|
|
</UButton>
|
|
</div>
|
|
<div class="hidden lg:flex lg:gap-x-12">
|
|
<UiHeaderLink
|
|
v-for="url in urls"
|
|
:name="url.name"
|
|
:path="url.path"
|
|
:key="url.path"
|
|
class="rounded-md -m.2.5 p-2.5 transition"
|
|
/>
|
|
</div>
|
|
<div class="hidden lg:flex lg:flex-1 lg:justify-end flex-row gap-8 place-items-center">
|
|
<RouterLink to="/login" class="font-semibold text-text-800 hover:text-text-600 transition">
|
|
Connexion <span aria-hidden="true">→</span>
|
|
</RouterLink>
|
|
<UiThemeSwitcher />
|
|
</div>
|
|
</nav>
|
|
<!-- Mobile menu -->
|
|
<div role="dialog" aria-modal="true" :class="{ hidden: menuHidden }" class="lg:hidden">
|
|
<div class="fixed inset-0 z-10"></div>
|
|
<div
|
|
class="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-background px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<RouterLink to="/" class="-m-1.5 p-1.5">
|
|
<span class="sr-only">GéJDR</span>
|
|
<UiLogo class="h-10 w-auto" />
|
|
</RouterLink>
|
|
<UButton variant="ghost" icon="i-mdi-close" color="text" size="md" @click="closeMenu">
|
|
<span class="sr-only">Fermer le menu</span>
|
|
</UButton>
|
|
</div>
|
|
<div class="mt-6 flow-root">
|
|
<UiHeaderLink
|
|
v-for="url in urls"
|
|
:name="url.name"
|
|
:path="url.path"
|
|
:key="url.path"
|
|
@click="closeMenu"
|
|
class="-mx-3 block rounded-lg px-3 my-1 py-2 text-xl/7 font-semibold text-text-800 hover:text-text-600 transition"
|
|
/>
|
|
</div>
|
|
<div class="py-6 flex flex-row space-between place-items-center">
|
|
<div class="flex-1">
|
|
<RouterLink
|
|
to="/login"
|
|
class="-mx-3 block rounded-lg px-3 py-2 text-xl/7 font-semibold text-text-800 hover:text-text-600 transition"
|
|
>
|
|
Connexion <span aria-hidden="true">→</span>
|
|
</RouterLink>
|
|
</div>
|
|
<UiThemeSwitcher />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Url {
|
|
path: string;
|
|
name: string;
|
|
}
|
|
|
|
const urls: Url[] = [
|
|
{ path: '/dashboard', name: 'Tableau de bord' },
|
|
{ path: '/campaigns', name: 'Mes campagnes' },
|
|
{ path: '/characters', name: 'Mes personnages' },
|
|
{ path: '/about', name: 'À propos' },
|
|
];
|
|
|
|
const menuHidden = ref(true);
|
|
const openMenu = () => (menuHidden.value = false);
|
|
const closeMenu = () => (menuHidden.value = true);
|
|
</script>
|