MALIO-DEV/Ferme
4
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 80 Wiki Activity

fix : layout admin

Browse Source
This commit is contained in:
Mattéo Dunoyer
2026-02-16 13:43:13 +01:00
parent 67428186f6
commit c9672f3964
1 changed files with 81 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
frontend/layouts/admin.vue
View File

@@ -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')
} }
} }