From 0a5ac61957a94cbf74cef800d6d943bdf686f61c Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 27 May 2026 17:41:12 +0200
Subject: [PATCH] feat(front) : ajustements layout maquette (sidebar, marges,
 titres)

- sidebar deplie a 232px (repli 72px conserve)
- marge horizontale du contenu responsive, 170px des xl (1280px)
- gap navbar -> contenu de 47px
- composant partage PageHeader (titre 32px/600, marge basse 44px, slot actions)
- migration des 6 pages vers PageHeader, suppression des marges hautes redondantes
---
 frontend/app/layouts/default.vue              |  5 ++--
 .../modules/commercial/pages/commercial.vue   |  4 +--
 .../modules/core/pages/admin/audit-log.vue    |  8 ++----
 frontend/modules/core/pages/admin/roles.vue   | 26 +++++++++----------
 frontend/modules/core/pages/admin/users.vue   |  8 +-----
 frontend/modules/core/pages/index.vue         |  4 +--
 frontend/modules/sites/pages/admin/sites.vue  | 26 +++++++++----------
 frontend/shared/components/ui/PageHeader.vue  | 12 +++++++++
 8 files changed, 46 insertions(+), 47 deletions(-)
 create mode 100644 frontend/shared/components/ui/PageHeader.vue

diff --git a/frontend/app/layouts/default.vue b/frontend/app/layouts/default.vue
index 28cd990..d818caf 100644
--- a/frontend/app/layouts/default.vue
+++ b/frontend/app/layouts/default.vue
@@ -4,6 +4,7 @@
             <MalioSidebar
                 v-model="ui.sidebarCollapsed"
                 :sections="translatedSections"
+                :sidebar-class="ui.sidebarCollapsed ? '' : 'w-[232px]'"
             >
                 <template #logo>
                     <img src="/LOGO_MALIO.png" alt="Malio"/>
@@ -16,10 +17,10 @@
             <div class="h-full flex-1 flex flex-col min-h-0 min-w-0">
                 <SiteSelector v-if="showSiteSelector"/>
                 <main
-                    class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white px-4 pb-24 sm:px-8 lg:px-16">
+                    class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white px-4 pb-10 sm:px-6 lg:px-12 xl:px-[170px]">
                     <div
                         aria-hidden="true"
-                        class="pointer-events-none sticky top-0 z-30 h-8 flex-shrink-0 bg-white sm:h-12"/>
+                        class="pointer-events-none sticky top-0 z-30 h-[47px] flex-shrink-0 bg-white"/>
                     <slot/>
                 </main>
             </div>
diff --git a/frontend/modules/commercial/pages/commercial.vue b/frontend/modules/commercial/pages/commercial.vue
index ac3c6f9..675419e 100644
--- a/frontend/modules/commercial/pages/commercial.vue
+++ b/frontend/modules/commercial/pages/commercial.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
-        <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ $t('commercial.title') }}</h1>
-        <p class="mt-4 text-neutral-500">{{ $t('commercial.welcome') }}</p>
+        <PageHeader>{{ $t('commercial.title') }}</PageHeader>
+        <p class="text-neutral-500">{{ $t('commercial.welcome') }}</p>
     </div>
 </template>
 
diff --git a/frontend/modules/core/pages/admin/audit-log.vue b/frontend/modules/core/pages/admin/audit-log.vue
index d1ac784..919316e 100644
--- a/frontend/modules/core/pages/admin/audit-log.vue
+++ b/frontend/modules/core/pages/admin/audit-log.vue
@@ -1,13 +1,9 @@
 <template>
     <div>
-        <div class="flex items-center justify-between">
-            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">
-                {{ t('admin.auditLog.title') }}
-            </h1>
-        </div>
+        <PageHeader>{{ t('admin.auditLog.title') }}</PageHeader>
 
         <!-- Filtres -->
-        <section class="mt-4 rounded border border-gray-200 bg-white p-4">
+        <section class="rounded border border-gray-200 bg-white p-4">
             <!-- Labels uniformes au-dessus : les composants Malio sont utilises sans
                  leur `label` flottant interne pour ne pas mixer deux patterns de label.
                  A revoir une fois le composant calendar Malio développé -->
diff --git a/frontend/modules/core/pages/admin/roles.vue b/frontend/modules/core/pages/admin/roles.vue
index 179dcc6..15d2e20 100644
--- a/frontend/modules/core/pages/admin/roles.vue
+++ b/frontend/modules/core/pages/admin/roles.vue
@@ -1,22 +1,20 @@
 <template>
     <div>
-        <!-- En-tete -->
-        <div class="flex items-center justify-between">
-            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">
-                {{ t('admin.roles.title') }}
-            </h1>
-            <MalioButton
-                v-if="can('core.roles.manage')"
-                :label="t('admin.roles.newRole')"
-                icon-name="mdi:add-bold"
-                icon-position="left"
-                @click="openCreateDrawer"
-            />
-        </div>
+        <PageHeader>
+            {{ t('admin.roles.title') }}
+            <template #actions>
+                <MalioButton
+                    v-if="can('core.roles.manage')"
+                    :label="t('admin.roles.newRole')"
+                    icon-name="mdi:add-bold"
+                    icon-position="left"
+                    @click="openCreateDrawer"
+                />
+            </template>
+        </PageHeader>
 
         <!-- Table des roles -->
         <MalioDataTable
-            class="mt-6"
             :columns="columns"
             :items="roleItems"
             :total-items="roles.length"
diff --git a/frontend/modules/core/pages/admin/users.vue b/frontend/modules/core/pages/admin/users.vue
index 1d2a00f..f4cc2f7 100644
--- a/frontend/modules/core/pages/admin/users.vue
+++ b/frontend/modules/core/pages/admin/users.vue
@@ -1,15 +1,9 @@
 <template>
     <div>
-        <!-- En-tete -->
-        <div class="flex items-center justify-between">
-            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">
-                {{ t('admin.users.title') }}
-            </h1>
-        </div>
+        <PageHeader>{{ t('admin.users.title') }}</PageHeader>
 
         <!-- Table des utilisateurs -->
         <MalioDataTable
-            class="mt-6"
             :columns="columns"
             :items="userItems"
             :total-items="users.length"
diff --git a/frontend/modules/core/pages/index.vue b/frontend/modules/core/pages/index.vue
index 429ff9a..4c46735 100644
--- a/frontend/modules/core/pages/index.vue
+++ b/frontend/modules/core/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
-        <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ $t('dashboard.title') }}</h1>
-        <p class="mt-4 text-neutral-500">{{ $t('dashboard.welcome') }}</p>
+        <PageHeader>{{ $t('dashboard.title') }}</PageHeader>
+        <p class="text-neutral-500">{{ $t('dashboard.welcome') }}</p>
     </div>
 </template>
 
diff --git a/frontend/modules/sites/pages/admin/sites.vue b/frontend/modules/sites/pages/admin/sites.vue
index 468ba3e..c30abfc 100644
--- a/frontend/modules/sites/pages/admin/sites.vue
+++ b/frontend/modules/sites/pages/admin/sites.vue
@@ -1,22 +1,20 @@
 <template>
     <div>
-        <!-- En-tete -->
-        <div class="flex items-center justify-between">
-            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">
-                {{ t('admin.sites.title') }}
-            </h1>
-            <MalioButton
-                v-if="can('sites.manage')"
-                :label="t('admin.sites.newSite')"
-                icon-name="mdi:add-bold"
-                icon-position="left"
-                @click="openCreateDrawer"
-            />
-        </div>
+        <PageHeader>
+            {{ t('admin.sites.title') }}
+            <template #actions>
+                <MalioButton
+                    v-if="can('sites.manage')"
+                    :label="t('admin.sites.newSite')"
+                    icon-name="mdi:add-bold"
+                    icon-position="left"
+                    @click="openCreateDrawer"
+                />
+            </template>
+        </PageHeader>
 
         <!-- Table des sites -->
         <MalioDataTable
-            class="mt-6"
             :columns="columns"
             :items="siteItems"
             :total-items="sites.length"
diff --git a/frontend/shared/components/ui/PageHeader.vue b/frontend/shared/components/ui/PageHeader.vue
new file mode 100644
index 0000000..ec9f595
--- /dev/null
+++ b/frontend/shared/components/ui/PageHeader.vue
@@ -0,0 +1,12 @@
+<template>
+    <!-- Entete de page standard : source unique du style des titres.
+         Slot par defaut = texte du titre, slot #actions = boutons a droite. -->
+    <div class="mb-[44px] flex items-center justify-between gap-4">
+        <h1 class="text-[32px] font-semibold text-primary-500">
+            <slot/>
+        </h1>
+        <div v-if="$slots.actions" class="shrink-0">
+            <slot name="actions"/>
+        </div>
+    </div>
+</template>