264 lines
10 KiB
Vue
264 lines
10 KiB
Vue
<template>
|
||
<div class="min-h-screen text-neutral-900 flex flex-col">
|
||
<!-- HEADER -->
|
||
<header class="w-full bg-primary-500 py-5 px-6">
|
||
<div class="flex w-full items-center ">
|
||
<!-- Burger (mobile) -->
|
||
<button
|
||
type="button"
|
||
class="inline-flex items-center justify-center text-3xl text-white md:hidden"
|
||
aria-label="Ouvrir le menu"
|
||
@click="toggleMenu"
|
||
>
|
||
<span aria-hidden="true" class="flex items-center">
|
||
<Icon name="mdi:menu" size="44"/>
|
||
</span>
|
||
</button>
|
||
|
||
<!-- Logo -->
|
||
<NuxtLink to="/" class="shrink-0">
|
||
<span class="flex items-center justify-center bg-white text-xl font-bold uppercase px-6 py-4">
|
||
LOGO
|
||
</span>
|
||
</NuxtLink>
|
||
|
||
<!-- NAV centré (desktop) -->
|
||
<nav
|
||
class="hidden md:flex flex-1 items-center justify-center gap-8 text-xl font-bold uppercase text-white"
|
||
>
|
||
<NuxtLink to="/" custom v-slot="{ href, navigate }">
|
||
<a
|
||
:href="href"
|
||
@click="navigate"
|
||
:class="route.path === '/'
|
||
? 'opacity-100'
|
||
: 'opacity-65 hover:opacity-100 transition'"
|
||
>
|
||
Accueil
|
||
</a>
|
||
</NuxtLink>
|
||
|
||
<NuxtLink
|
||
v-if="auth.isAdmin"
|
||
to="/admin/supplier/supplier-list"
|
||
custom
|
||
v-slot="{ href, navigate }"
|
||
>
|
||
<a
|
||
:href="href"
|
||
@click="navigate"
|
||
:class="route.path.startsWith('/admin/supplier')
|
||
? 'opacity-100'
|
||
: 'opacity-65 hover:opacity-100 transition'"
|
||
>
|
||
Fournisseurs
|
||
</a>
|
||
</NuxtLink>
|
||
|
||
<NuxtLink
|
||
v-if="auth.isAdmin"
|
||
to="/admin/carrier/carrier-list"
|
||
custom
|
||
v-slot="{ href, navigate }"
|
||
>
|
||
<a
|
||
:href="href"
|
||
@click="navigate"
|
||
:class="route.path.startsWith('/admin/carrier')
|
||
? 'opacity-100'
|
||
: 'opacity-65 hover:opacity-100 transition'"
|
||
>
|
||
Transporteurs
|
||
</a>
|
||
</NuxtLink>
|
||
|
||
<NuxtLink
|
||
v-if="auth.isAdmin"
|
||
to="/admin/user/list"
|
||
custom
|
||
v-slot="{ href, navigate }"
|
||
>
|
||
<a
|
||
:href="href"
|
||
@click="navigate"
|
||
:class="route.path.startsWith('/admin/user')
|
||
? 'opacity-100'
|
||
: 'opacity-65 hover:opacity-100 transition'"
|
||
>
|
||
Utilisateurs
|
||
</a>
|
||
</NuxtLink>
|
||
|
||
<NuxtLink
|
||
v-if="auth.isAdmin"
|
||
to="/admin/customer/customer-list"
|
||
custom
|
||
v-slot="{ href, navigate }"
|
||
>
|
||
<a
|
||
:href="href"
|
||
@click="navigate"
|
||
:class="route.path.startsWith('/admin/customer')
|
||
? 'opacity-100'
|
||
: 'opacity-65 hover:opacity-100 transition'"
|
||
>
|
||
Clients
|
||
</a>
|
||
</NuxtLink>
|
||
</nav>
|
||
|
||
<!-- Spacer mobile (pour centrer visuellement le header si besoin) -->
|
||
<div class="w-[44px] md:hidden"></div>
|
||
|
||
<!-- User dropdown à droite (desktop) -->
|
||
<div v-if="auth.isAuthenticated" class="ml-auto relative hidden md:flex items-center text-white">
|
||
<button
|
||
type="button"
|
||
class="inline-flex items-center text-xl leading-none transition hover:opacity-80"
|
||
@click="toggleUserMenu"
|
||
aria-haspopup="true"
|
||
:aria-expanded="isUserMenuOpen ? 'true' : 'false'"
|
||
>
|
||
<span class="capitalize font-bold">{{ userDisplayName }}</span>
|
||
<span class="ml-[6px] inline-flex items-center font-bold">
|
||
<Icon v-if="isUserMenuOpen" name="mdi:chevron-up" size="20"/>
|
||
<Icon v-else name="mdi:chevron-down" size="20"/>
|
||
</span>
|
||
</button>
|
||
|
||
<div
|
||
v-if="isUserMenuOpen"
|
||
class="absolute right-0 top-full z-10 mt-2 w-56 rounded-md bg-primary-500 py-2 border-neutral-300 border shadow-lg"
|
||
role="menu"
|
||
>
|
||
<button
|
||
type="button"
|
||
class="w-full px-4 py-2 text-left text-sm font-semibold text-white opacity-85 hover:opacity-100 transition"
|
||
@click="handleLogout"
|
||
>
|
||
Déconnexion
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Overlay (mobile) -->
|
||
<transition
|
||
enter-active-class="transition duration-200 ease-out"
|
||
enter-from-class="opacity-0"
|
||
enter-to-class="opacity-100"
|
||
leave-active-class="transition duration-150 ease-in"
|
||
leave-from-class="opacity-100"
|
||
leave-to-class="opacity-0"
|
||
>
|
||
<div
|
||
v-if="isMenuOpen"
|
||
class="fixed inset-0 z-40 bg-black/40 md:hidden"
|
||
@click="closeMenu"
|
||
/>
|
||
</transition>
|
||
|
||
<!-- Drawer (mobile) -->
|
||
<transition
|
||
enter-active-class="transition duration-200 ease-out"
|
||
enter-from-class="-translate-x-full"
|
||
enter-to-class="translate-x-0"
|
||
leave-active-class="transition duration-150 ease-in"
|
||
leave-from-class="translate-x-0"
|
||
leave-to-class="-translate-x-full"
|
||
>
|
||
<aside
|
||
v-if="isMenuOpen"
|
||
class="fixed left-0 top-0 z-50 h-full w-full bg-primary-600 px-6 pb-8 pt-6 text-white shadow-xl md:hidden"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
>
|
||
<div class="flex items-center justify-between">
|
||
<span class="text-2xl font-bold uppercase">Menu</span>
|
||
<button
|
||
type="button"
|
||
class="text-2xl"
|
||
aria-label="Fermer le menu"
|
||
@click="closeMenu"
|
||
>
|
||
<Icon name="mdi:close" size="44"/>
|
||
</button>
|
||
</div>
|
||
|
||
<nav class="mt-8 flex flex-col gap-6 text-xl font-bold uppercase">
|
||
<NuxtLink to="/admin/dashboard" @click="closeMenu">Accueil</NuxtLink>
|
||
<NuxtLink v-if="auth.isAdmin" to="/admin/supplier/supplier-list" @click="closeMenu">
|
||
Fournisseurs
|
||
</NuxtLink>
|
||
<NuxtLink v-if="auth.isAdmin" to="/admin/carrier/carrier-list" @click="closeMenu">
|
||
Transporteurs
|
||
</NuxtLink>
|
||
<NuxtLink v-if="auth.isAdmin" to="/admin/user/list" @click="closeMenu">
|
||
Utilisateurs
|
||
</NuxtLink>
|
||
<NuxtLink v-if="auth.isAdmin" to="/admin/customer/customer-list" @click="closeMenu">
|
||
Clients
|
||
</NuxtLink>
|
||
</nav>
|
||
|
||
<button
|
||
v-if="auth.isAuthenticated"
|
||
type="button"
|
||
class="mt-6 text-xl font-bold uppercase"
|
||
@click="handleLogout"
|
||
>
|
||
Déconnexion
|
||
</button>
|
||
</aside>
|
||
</transition>
|
||
</header>
|
||
|
||
<main class="mx-auto w-full max-w-[1280px] py-2 flex-1">
|
||
<slot/>
|
||
</main>
|
||
|
||
<footer class="w-full mt-auto bg-primary-500 px-6 py-3">
|
||
<p class="font-bold text-white text-right">v{{ version }}</p>
|
||
</footer>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import {useAuthStore} from '~/stores/auth'
|
||
|
||
const route = useRoute()
|
||
const auth = useAuthStore()
|
||
const {version} = useAppVersion()
|
||
|
||
const isMenuOpen = ref(false)
|
||
const isUserMenuOpen = ref(false)
|
||
|
||
const userDisplayName = computed(() => auth.user?.username ?? 'Utilisateur')
|
||
|
||
const closeMenu = () => {
|
||
isMenuOpen.value = false
|
||
}
|
||
|
||
const toggleMenu = () => {
|
||
isMenuOpen.value = !isMenuOpen.value
|
||
// évite d’avoir deux menus ouverts en même temps
|
||
if (isMenuOpen.value) isUserMenuOpen.value = false
|
||
}
|
||
|
||
const toggleUserMenu = () => {
|
||
isUserMenuOpen.value = !isUserMenuOpen.value
|
||
// idem
|
||
if (isUserMenuOpen.value) isMenuOpen.value = false
|
||
}
|
||
|
||
const handleLogout = async () => {
|
||
try {
|
||
await auth.logout()
|
||
} finally {
|
||
closeMenu()
|
||
isUserMenuOpen.value = false
|
||
await navigateTo('/login')
|
||
}
|
||
}
|
||
</script>
|