From c9672f3964bb85dc578bfe62b2bd9403da9494d1 Mon Sep 17 00:00:00 2001
From: Matteo <matteo@yuno.malio.fr>
Date: Mon, 16 Feb 2026 13:43:13 +0100
Subject: [PATCH] fix : layout admin

---
 frontend/layouts/admin.vue | 142 +++++++++++++++++++++----------------
 1 file changed, 81 insertions(+), 61 deletions(-)

diff --git a/frontend/layouts/admin.vue b/frontend/layouts/admin.vue
index 7e71710..73ce81c 100644
--- a/frontend/layouts/admin.vue
+++ b/frontend/layouts/admin.vue
@@ -1,111 +1,131 @@
 <template>
     <div class="min-h-screen text-neutral-900 grid grid-rows-[85px,1fr]">
         <!-- HEADER -->
-        <header class="bg-primary-500 z-50 h-[85px]">
-            <div class="h-full w-full px-6 grid grid-cols-[auto,1fr,auto] items-center gap-8">
-                <NuxtLink to="/" class="grid place-items-center">
-          <span class="grid place-items-center bg-white text-xl font-bold uppercase text-primary-500 p-4">
+        <header class="w-full border-b border-neutral-200 bg-primary-500 ">
+            <div class="flex w-full items-center p-3 ">
+                <NuxtLink to="/" class="ml-4 shrink-0">
+          <span
+              class="flex items-center justify-center bg-white text-xl font-bold uppercase px-6 py-4"
+          >
             LOGO
           </span>
                 </NuxtLink>
-
-                <nav class="text-2xl font-bold uppercase text-white"></nav>
-
-                <NuxtLink
-                    to="/"
-                    class="text-xl font-bold uppercase text-white transition hover:opacity-80 justify-self-end"
-                >
-                    Quitter le panel admin
-                </NuxtLink>
-            </div>
-        </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
+                <!-- NAV centré (desktop) -->
+                <nav
+                    class="flex flex-1 items-center justify-center gap-8 text-xl font-semibold uppercase text-white">
+                    <NuxtLink to="/admin/dashboard" custom v-slot="{ href, navigate }">
+                        <a
+                            :href="href"
+                            @click="navigate"
+                            :class="route.path === '/admin/dashboard' ? 'opacity-100' : 'opacity-65 hover:opacity-100 transition'"
+                        >
+                            Accueil
                         </a>
                     </NuxtLink>
-                    <NuxtLink
-                        to="/admin/supplier/supplier-list"
-                        custom v-slot="{ href, navigate }">
-                        <a :href="href"
-                           @click="navigate"
-                           :class="route.path.startsWith('/admin/supplier') ? 'opacity-100' : 'opacity-50'">
-                            Fournisseur
+
+                    <NuxtLink 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
-                        to="/admin/carrier/carrier-list"
-                        custom v-slot="{ href, navigate }">
-                        <a :href="href"
-                           @click="navigate"
-                           :class="route.path.startsWith('/admin/carrier') ? 'opacity-100' : 'opacity-50'">
-                            Transporteur
+
+                    <NuxtLink 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 to="/admin/user/list" custom v-slot="{ href, navigate }">
                         <a
                             :href="href"
                             @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
                         </a>
                     </NuxtLink>
+
                     <NuxtLink to="/admin/customer/customer-list" custom v-slot="{ href, navigate }">
                         <a
                             :href="href"
                             @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
                         </a>
                     </NuxtLink>
-                </div>
-
-                <div class="p-4">
+                </nav>
 
+                <!-- User dropdown à droite (desktop) -->
+                <div class="ml-auto relative flex items-center text-white">
                     <button
-                        @click="handleLogout"
-                        class="w-full bg-red-600 hover:bg-red-700 py-2 rounded font-bold"
+                        type="button"
+                        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>
-                    <p class="font-bold text-white text-center pt-2">
-                        v{{ version }}
-                    </p>
+                    <div
+                        v-if="isUserMenuOpen"
+                        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>
-            </aside>
 
-            <main class="min-h-0 overflow-auto px-12 py-12 ">
-                <div class="w-full ">
-                    <slot/>
-                </div>
-            </main>
-        </div>
+            </div>
+        </header>
+
+        <main class="mx-auto w-full max-w-[1280px] py-2">
+            <slot/>
+        </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>
 </template>
 
-
 <script setup lang="ts">
 import {useAuthStore} from '~/stores/auth'
 
+const route = useRoute()
 const auth = useAuthStore()
 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 () => {
     try {
         await auth.logout()
     } finally {
+        isUserMenuOpen.value = false
         await navigateTo('/login')
     }
 }