From 358da6a8ad0d9560427539d702fd5bb7ee7270b9 Mon Sep 17 00:00:00 2001
From: Matteo <matteo@yuno.malio.fr>
Date: Mon, 16 Feb 2026 14:32:31 +0000
Subject: [PATCH] Navbar (!28)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

|  | Layout-Admin |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Reviewed-on: https://gitea.malio.fr/MALIO-DEV/Ferme/pulls/28
Reviewed-by: Autin <tristan@yuno.malio.fr>
Co-authored-by: Matteo <matteo@yuno.malio.fr>
Co-committed-by: Matteo <matteo@yuno.malio.fr>
---
 CHANGELOG.md                                  |   1 +
 frontend/layouts/admin.vue                    | 112 -----------
 frontend/layouts/default.vue                  | 184 +++++++++++++++---
 frontend/pages/admin/carrier/[[id]].vue       |   2 +-
 frontend/pages/admin/carrier/carrier-list.vue |   2 +-
 frontend/pages/admin/customer/[[id]].vue      |   2 +-
 frontend/pages/admin/customer/address.vue     |   2 +-
 .../pages/admin/customer/customer-list.vue    |   2 +-
 frontend/pages/admin/dashboard.vue            |   2 +-
 frontend/pages/admin/supplier/[[id]].vue      |   2 +-
 frontend/pages/admin/supplier/address.vue     |   2 +-
 .../pages/admin/supplier/supplier-list.vue    |   2 +-
 frontend/pages/admin/user/[[id]].vue          |   2 +-
 frontend/pages/admin/user/list.vue            |   2 +-
 14 files changed, 167 insertions(+), 152 deletions(-)
 delete mode 100644 frontend/layouts/admin.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 55246f3..a5e447b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -46,6 +46,7 @@ Ajouter dans le fichier .env du frontend
 * [#324] Creation page admin listing clients
 * [#326] Admin modification creation client
 * [#325] Correction diverses
+* fix layout admin
 
 ### Changed
 
diff --git a/frontend/layouts/admin.vue b/frontend/layouts/admin.vue
deleted file mode 100644
index 7e71710..0000000
--- a/frontend/layouts/admin.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<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">
-            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
-                        </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
-                        </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
-                        </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'"
-                        >
-                            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'"
-                        >
-                            Clients
-                        </a>
-                    </NuxtLink>
-                </div>
-
-                <div class="p-4">
-
-                    <button
-                        @click="handleLogout"
-                        class="w-full bg-red-600 hover:bg-red-700 py-2 rounded font-bold"
-                    >
-                        Déconnexion
-                    </button>
-                    <p class="font-bold text-white text-center pt-2">
-                        v{{ version }}
-                    </p>
-                </div>
-            </aside>
-
-            <main class="min-h-0 overflow-auto px-12 py-12 ">
-                <div class="w-full ">
-                    <slot/>
-                </div>
-            </main>
-        </div>
-    </div>
-</template>
-
-
-<script setup lang="ts">
-import {useAuthStore} from '~/stores/auth'
-
-const auth = useAuthStore()
-const {version} = useAppVersion()
-
-const route = useRoute()
-const handleLogout = async () => {
-    try {
-        await auth.logout()
-    } finally {
-        await navigateTo('/login')
-    }
-}
-</script>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 28128dd..38d4f25 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -1,54 +1,148 @@
 <template>
-    <div class="min-h-screen text-neutral-900 grid grid-rows-[85px,1fr]">
-    <header class="w-full border-b border-neutral-200 bg-primary-500">
-            <div class="flex w-full items-center justify-center px-6 py-4">
+    <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>
+          <span aria-hidden="true" class="flex items-center">
+            <Icon name="mdi:menu" size="44"/>
+          </span>
                 </button>
-                <nav class="ml-4 hidden items-center gap-8 text-2xl font-bold uppercase text-white md:flex">
-                    <NuxtLink to="/" custom v-slot="{ href, navigate, isExactActive }">
+
+                <!-- 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="isExactActive ? 'opacity-100' : 'opacity-50'"
+                            :class="route.path === '/'
+                ? 'opacity-100'
+                : 'opacity-65 hover:opacity-100 transition'"
                         >
                             Accueil
                         </a>
                     </NuxtLink>
+
                     <NuxtLink
-                        to="/admin/dashboard" custom v-slot="{ href, navigate, isExactActive }"
                         v-if="auth.isAdmin"
+                        to="/admin/supplier/supplier-list"
+                        custom
+                        v-slot="{ href, navigate }"
                     >
                         <a
                             :href="href"
                             @click="navigate"
-                            :class="isExactActive ? 'opacity-100' : 'opacity-50'"
+                            :class="route.path.startsWith('/admin/supplier')
+                ? 'opacity-100'
+                : 'opacity-65 hover:opacity-100 transition'"
                         >
-                            Admin
+                            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>
-                <NuxtLink to="/" class="flex flex-1 items-center justify-center gap-3">
-                  <span
-                      class="flex items-center justify-center bg-white text-xl font-bold uppercase text-primary-500 p-4"
-                  >
-                    LOGO
-                  </span>
-                </NuxtLink>
+
+                <!-- Spacer mobile (pour centrer visuellement le header si besoin) -->
                 <div class="w-[44px] md:hidden"></div>
-                <button
-                    type="button"
-                    class="ml-auto hidden text-xl font-bold uppercase text-white transition hover:opacity-80 md:inline-flex"
-                    @click="handleLogout"
-                >
-                    Déconnexion
-                </button>
+
+                <!-- 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"
@@ -63,6 +157,8 @@
                     @click="closeMenu"
                 />
             </transition>
+
+            <!-- Drawer (mobile) -->
             <transition
                 enter-active-class="transition duration-200 ease-out"
                 enter-from-class="-translate-x-full"
@@ -88,12 +184,27 @@
                             <Icon name="mdi:close" size="44"/>
                         </button>
                     </div>
+
                     <nav class="mt-8 flex flex-col gap-6 text-xl font-bold uppercase">
-                        <NuxtLink to="/" class="opacity-100" @click="closeMenu">Accueil</NuxtLink>
+                        <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-5 text-xl font-bold uppercase"
+                        class="mt-6 text-xl font-bold uppercase"
                         @click="handleLogout"
                     >
                         Déconnexion
@@ -101,10 +212,12 @@
                 </aside>
             </transition>
         </header>
-        <main class="mx-auto w-full max-w-[1280px]">
+
+        <main class="mx-auto w-full max-w-[1280px] py-2 flex-1">
             <slot/>
         </main>
-        <footer class="w-full mt-8 bg-primary-500 px-6 py-3">
+
+        <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>
@@ -115,15 +228,27 @@ import {useAuthStore} from '~/stores/auth'
 
 const route = useRoute()
 const auth = useAuthStore()
-const isMenuOpen = ref(false)
 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 () => {
@@ -131,6 +256,7 @@ const handleLogout = async () => {
         await auth.logout()
     } finally {
         closeMenu()
+        isUserMenuOpen.value = false
         await navigateTo('/login')
     }
 }
diff --git a/frontend/pages/admin/carrier/[[id]].vue b/frontend/pages/admin/carrier/[[id]].vue
index 350c627..e0b9c3c 100644
--- a/frontend/pages/admin/carrier/[[id]].vue
+++ b/frontend/pages/admin/carrier/[[id]].vue
@@ -45,7 +45,7 @@ const form = reactive<CarrierFormData>({
 })
 
 definePageMeta({
-    layout: 'admin'
+    layout: 'default'
 })
 
 const hydrateFromUser = (carrier: CarrierData | null) => {
diff --git a/frontend/pages/admin/carrier/carrier-list.vue b/frontend/pages/admin/carrier/carrier-list.vue
index 4423186..a1bc276 100644
--- a/frontend/pages/admin/carrier/carrier-list.vue
+++ b/frontend/pages/admin/carrier/carrier-list.vue
@@ -42,7 +42,7 @@ const goToCarrier = (id: number) => {
 }
 
 definePageMeta({
-    layout: 'admin'
+    layout: 'default'
 })
 
 onMounted(async () => {
diff --git a/frontend/pages/admin/customer/[[id]].vue b/frontend/pages/admin/customer/[[id]].vue
index d00a82c..7ac5fa0 100644
--- a/frontend/pages/admin/customer/[[id]].vue
+++ b/frontend/pages/admin/customer/[[id]].vue
@@ -80,7 +80,7 @@ import {createCustomer, getCustomer, updateCustomer} from "~/services/customer"
 import type {CustomerData, CustomerFormData, CustomerPayload} from "~/services/dto/customer-data"
 import {useAuthStore} from "~/stores/auth"
 
-definePageMeta({layout: "admin"})
+definePageMeta({layout: "default"})
 
 const route = useRoute()
 const router = useRouter()
diff --git a/frontend/pages/admin/customer/address.vue b/frontend/pages/admin/customer/address.vue
index 5651496..99d0e90 100644
--- a/frontend/pages/admin/customer/address.vue
+++ b/frontend/pages/admin/customer/address.vue
@@ -8,7 +8,7 @@ import { createAddress, getAddress, updateAddress } from "~/services/address"
 import { getCustomer, updateCustomer } from "~/services/customer"
 import type { CustomerData } from "~/services/dto/customer-data"
 
-definePageMeta({ layout: "admin" })
+definePageMeta({ layout: "default" })
 
 const route = useRoute()
 const router = useRouter()
diff --git a/frontend/pages/admin/customer/customer-list.vue b/frontend/pages/admin/customer/customer-list.vue
index 341f688..aed9f89 100644
--- a/frontend/pages/admin/customer/customer-list.vue
+++ b/frontend/pages/admin/customer/customer-list.vue
@@ -93,7 +93,7 @@ import { getCustomerList } from "~/services/customer"
 import type { CustomerData } from "~/services/dto/customer-data"
 import { useAuthStore } from "~/stores/auth"
 
-definePageMeta({ layout: "admin" })
+definePageMeta({ layout: "default" })
 
 const customerList = ref<CustomerData[]>([])
 const router = useRouter()
diff --git a/frontend/pages/admin/dashboard.vue b/frontend/pages/admin/dashboard.vue
index 28f3f30..34e2473 100644
--- a/frontend/pages/admin/dashboard.vue
+++ b/frontend/pages/admin/dashboard.vue
@@ -2,6 +2,6 @@
 </template>
 <script setup lang="ts">
 definePageMeta({
-    layout: 'admin'
+    layout: 'default'
 })
 </script>
diff --git a/frontend/pages/admin/supplier/[[id]].vue b/frontend/pages/admin/supplier/[[id]].vue
index f3594a1..9b7e417 100644
--- a/frontend/pages/admin/supplier/[[id]].vue
+++ b/frontend/pages/admin/supplier/[[id]].vue
@@ -80,7 +80,7 @@ import {createSupplier, getSupplier, updateSupplier} from "~/services/supplier"
 import type {SupplierData, SupplierFormData, SupplierPayload} from "~/services/dto/supplier-data"
 import {useAuthStore} from "~/stores/auth"
 
-definePageMeta({layout: "admin"})
+definePageMeta({layout: "default"})
 
 const route = useRoute()
 const router = useRouter()
diff --git a/frontend/pages/admin/supplier/address.vue b/frontend/pages/admin/supplier/address.vue
index c13a0f3..40b454c 100644
--- a/frontend/pages/admin/supplier/address.vue
+++ b/frontend/pages/admin/supplier/address.vue
@@ -8,7 +8,7 @@ import {createAddress, getAddress, updateAddress} from "~/services/address";
 import {getSupplier, updateSupplier} from "~/services/supplier";
 import type {SupplierData} from "~/services/dto/supplier-data";
 
-definePageMeta({ layout: "admin" })
+definePageMeta({ layout: "default" })
 
 const route = useRoute()
 const router = useRouter()
diff --git a/frontend/pages/admin/supplier/supplier-list.vue b/frontend/pages/admin/supplier/supplier-list.vue
index 5fda44a..38e86dc 100644
--- a/frontend/pages/admin/supplier/supplier-list.vue
+++ b/frontend/pages/admin/supplier/supplier-list.vue
@@ -89,7 +89,7 @@ import { getSupplierList } from "~/services/supplier"
 import type { SupplierData } from "~/services/dto/supplier-data"
 import { useAuthStore } from "~/stores/auth"
 
-definePageMeta({ layout: "admin" })
+definePageMeta({ layout: "default" })
 
 const supplierList = ref<SupplierData[]>([])
 const router = useRouter()
diff --git a/frontend/pages/admin/user/[[id]].vue b/frontend/pages/admin/user/[[id]].vue
index 8cae926..97dd8e3 100644
--- a/frontend/pages/admin/user/[[id]].vue
+++ b/frontend/pages/admin/user/[[id]].vue
@@ -39,7 +39,7 @@
 </template>
 <script setup lang="ts">
 definePageMeta({
-    layout: 'admin'
+    layout: 'default'
 })
 
 import {computed, reactive, ref, watch} from 'vue'
diff --git a/frontend/pages/admin/user/list.vue b/frontend/pages/admin/user/list.vue
index 3b89da9..172e7b2 100644
--- a/frontend/pages/admin/user/list.vue
+++ b/frontend/pages/admin/user/list.vue
@@ -38,7 +38,7 @@
 
 <script setup lang="ts">
 definePageMeta({
-    layout: 'admin'
+    layout: 'default'
 })
 
 import type {UserData} from "~/services/dto/user-data";