Navbar #28
@@ -1,111 +1,131 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="min-h-screen text-neutral-900 grid grid-rows-[85px,1fr]">
|
<div class="min-h-screen text-neutral-900 grid grid-rows-[85px,1fr]">
|
||||||
<!-- HEADER -->
|
<!-- HEADER -->
|
||||||
<header class="bg-primary-500 z-50 h-[85px]">
|
<header class="w-full border-b border-neutral-200 bg-primary-500 ">
|
||||||
<div class="h-full w-full px-6 grid grid-cols-[auto,1fr,auto] items-center gap-8">
|
<div class="flex w-full items-center p-3 ">
|
||||||
<NuxtLink to="/" class="grid place-items-center">
|
<NuxtLink to="/" class="ml-4 shrink-0">
|
||||||
<span class="grid place-items-center bg-white text-xl font-bold uppercase text-primary-500 p-4">
|
<span
|
||||||
|
class="flex items-center justify-center bg-white text-xl font-bold uppercase px-6 py-4"
|
||||||
|
>
|
||||||
LOGO
|
LOGO
|
||||||
</span>
|
</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
<!-- NAV centré (desktop) -->
|
||||||
<nav class="text-2xl font-bold uppercase text-white"></nav>
|
<nav
|
||||||
|
class="flex flex-1 items-center justify-center gap-8 text-xl font-semibold uppercase text-white">
|
||||||
<NuxtLink
|
<NuxtLink to="/admin/dashboard" custom v-slot="{ href, navigate }">
|
||||||
to="/"
|
<a
|
||||||
class="text-xl font-bold uppercase text-white transition hover:opacity-80 justify-self-end"
|
:href="href"
|
||||||
>
|
@click="navigate"
|
||||||
Quitter le panel admin
|
:class="route.path === '/admin/dashboard' ? 'opacity-100' : 'opacity-65 hover:opacity-100 transition'"
|
||||||
</NuxtLink>
|
>
|
||||||
</div>
|
Accueil
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-[16rem,1fr] h-[calc(100vh-85px)] min-h-0">
|
|
||||||
<aside class="bg-primary-500 text-white min-h-0 flex flex-col justify-between">
|
|
||||||
<div class="flex flex-col gap-4 p-4 font-bold text-xl">
|
|
||||||
<!-- Liste des liens à ajouter ci-dessous -->
|
|
||||||
<NuxtLink
|
|
||||||
to="/admin/dashboard"
|
|
||||||
custom v-slot="{ href, navigate, isExactActive }">
|
|
||||||
<a :href="href"
|
|
||||||
@click="navigate"
|
|
||||||
:class="isExactActive ? 'opacity-100' : 'opacity-50'">
|
|
||||||
Tableau de bord
|
|
||||||
</a>
|
</a>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<NuxtLink
|
|
||||||
to="/admin/supplier/supplier-list"
|
<NuxtLink to="/admin/supplier/supplier-list" custom v-slot="{ href, navigate }">
|
||||||
custom v-slot="{ href, navigate }">
|
<a
|
||||||
<a :href="href"
|
:href="href"
|
||||||
@click="navigate"
|
@click="navigate"
|
||||||
:class="route.path.startsWith('/admin/supplier') ? 'opacity-100' : 'opacity-50'">
|
:class="route.path.startsWith('/admin/supplier') ? 'opacity-100' : 'opacity-65 hover:opacity-100 transition'"
|
||||||
Fournisseur
|
>
|
||||||
|
Fournisseurs
|
||||||
</a>
|
</a>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<NuxtLink
|
|
||||||
to="/admin/carrier/carrier-list"
|
<NuxtLink to="/admin/carrier/carrier-list" custom v-slot="{ href, navigate }">
|
||||||
custom v-slot="{ href, navigate }">
|
<a
|
||||||
<a :href="href"
|
:href="href"
|
||||||
@click="navigate"
|
@click="navigate"
|
||||||
:class="route.path.startsWith('/admin/carrier') ? 'opacity-100' : 'opacity-50'">
|
:class="route.path.startsWith('/admin/carrier') ? 'opacity-100' : 'opacity-65 hover:opacity-100 transition'"
|
||||||
Transporteur
|
>
|
||||||
|
Transporteurs
|
||||||
</a>
|
</a>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
||||||
<NuxtLink to="/admin/user/list" custom v-slot="{ href, navigate }">
|
<NuxtLink to="/admin/user/list" custom v-slot="{ href, navigate }">
|
||||||
<a
|
<a
|
||||||
:href="href"
|
:href="href"
|
||||||
@click="navigate"
|
@click="navigate"
|
||||||
:class="route.path.startsWith('/admin/user') ? 'opacity-100' : 'opacity-50'"
|
:class="route.path.startsWith('/admin/user') ? 'opacity-100' : 'opacity-65 hover:opacity-100 transition'"
|
||||||
>
|
>
|
||||||
Utilisateurs
|
Utilisateurs
|
||||||
</a>
|
</a>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
||||||
<NuxtLink to="/admin/customer/customer-list" custom v-slot="{ href, navigate }">
|
<NuxtLink to="/admin/customer/customer-list" custom v-slot="{ href, navigate }">
|
||||||
<a
|
<a
|
||||||
:href="href"
|
:href="href"
|
||||||
@click="navigate"
|
@click="navigate"
|
||||||
:class="route.path.startsWith('/admin/customer') ? 'opacity-100' : 'opacity-50'"
|
:class="route.path.startsWith('/admin/customer') ? 'opacity-100' : 'opacity-65 hover:opacity-100 transition'"
|
||||||
>
|
>
|
||||||
Clients
|
Clients
|
||||||
</a>
|
</a>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</div>
|
</nav>
|
||||||
|
|
||||||
<div class="p-4">
|
|
||||||
|
|
||||||
|
<!-- User dropdown à droite (desktop) -->
|
||||||
|
<div class="ml-auto relative flex items-center text-white">
|
||||||
<button
|
<button
|
||||||
@click="handleLogout"
|
type="button"
|
||||||
class="w-full bg-red-600 hover:bg-red-700 py-2 rounded font-bold"
|
class="inline-flex items-center gap-2 text-xl leading-none transition hover:opacity-80"
|
||||||
|
@click="toggleUserMenu"
|
||||||
|
aria-haspopup="true"
|
||||||
|
:aria-expanded="isUserMenuOpen ? 'true' : 'false'"
|
||||||
>
|
>
|
||||||
Déconnexion
|
<span class="capitalize">{{ userDisplayName }}</span>
|
||||||
|
<span class="inline-flex items-center">
|
||||||
|
<Icon v-if="isUserMenuOpen" name="mdi:chevron-up" size="20"/>
|
||||||
|
<Icon v-else name="mdi:chevron-down" size="20"/>
|
||||||
|
</span>
|
||||||
</button>
|
</button>
|
||||||
<p class="font-bold text-white text-center pt-2">
|
<div
|
||||||
v{{ version }}
|
v-if="isUserMenuOpen"
|
||||||
</p>
|
class="absolute right-0 top-full z-10 mt-2 w-56 rounded-md bg-primary-500 py-2 text-neutral-900 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>
|
||||||
</aside>
|
|
||||||
|
|
||||||
<main class="min-h-0 overflow-auto px-12 py-12 ">
|
</div>
|
||||||
<div class="w-full ">
|
</header>
|
||||||
<slot/>
|
|
||||||
</div>
|
<main class="mx-auto w-full max-w-[1280px] py-2">
|
||||||
</main>
|
<slot/>
|
||||||
</div>
|
</main>
|
||||||
|
|
||||||
|
<footer class="w-full mt-8 bg-primary-500 px-6 py-3">
|
||||||
|
<p class="font-bold text-white text-right">v{{ version }}</p>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {useAuthStore} from '~/stores/auth'
|
import {useAuthStore} from '~/stores/auth'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
const auth = useAuthStore()
|
const auth = useAuthStore()
|
||||||
const {version} = useAppVersion()
|
const {version} = useAppVersion()
|
||||||
|
const isUserMenuOpen = ref(false)
|
||||||
|
|
||||||
|
const userDisplayName = computed(() => auth.user?.username ?? 'Utilisateur')
|
||||||
|
|
||||||
|
const toggleUserMenu = () => {
|
||||||
|
isUserMenuOpen.value = !isUserMenuOpen.value
|
||||||
|
}
|
||||||
|
|
||||||
const route = useRoute()
|
|
||||||
const handleLogout = async () => {
|
const handleLogout = async () => {
|
||||||
try {
|
try {
|
||||||
await auth.logout()
|
await auth.logout()
|
||||||
} finally {
|
} finally {
|
||||||
|
isUserMenuOpen.value = false
|
||||||
await navigateTo('/login')
|
await navigateTo('/login')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user