Files
Lesstime/frontend/components/ui/PageHeader.vue
T
tristan 30b067afdd refactor(front) : composant PageHeader unifié + standardisation des titres
- Nouveau composant ui/PageHeader.vue : source unique du style des titres
  (30px / semi-bold / bleu malio), sticky avec masquage du scroll, slots
  #actions et #subheader (barres de filtres/onglets collées au titre)
- Layout : marges <main> réduites (sm:px-6 lg:px-12 xl:px-11) + suppression
  du bloc-spacer sticky devenu inutile
- ~17 pages migrées vers <PageHeader>, un seul pattern partout
- Espacement titre -> contenu uniforme (30px), porté par le composant

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-25 11:47:47 +02:00

26 lines
1.2 KiB
Vue

<template>
<!-- Entête de page standard : source unique du style des titres.
Toujours sticky en haut du <main> scrollable : reste visible au scroll.
Fond blanc + pt-[38px]/pb-[30px] (au lieu de marges) pour que le contenu
défilant soit masqué sous l'entête (espaces haut ET bas compris) et que
l'entête soit collée sous l'AppTopNav sans trou.
Slots :
- défaut : texte du titre
- #actions : boutons à droite du titre
- #subheader : barre de filtres / onglets rendue SOUS le titre, dans le
même bloc sticky (reste donc collée avec le titre). La
marge titre -> sous-entête est portée par le contenu passé
(ex. mt-4) pour laisser chaque page régler son cas. -->
<div class="sticky top-0 z-20 bg-white pt-[38px] pb-[30px]">
<div class="flex items-center justify-between gap-4">
<h1 class="text-[30px] font-semibold text-primary-500">
<slot/>
</h1>
<div v-if="$slots.actions" class="shrink-0">
<slot name="actions"/>
</div>
</div>
<slot name="subheader"/>
</div>
</template>