AppHeader

Composant d'en-tête fixe qui gère la navigation principale, le basculement du mode sombre/clair, et l'affichage du mode administrateur.

Usage

Basic

Utilisez le composant AppHeader dans un layout :

<template>
  <div>
    <AppHeader />
    <main>
      <slot />
    </main>
  </div>
</template>

Avec layout complet

<template>
  <div class="flex flex-col min-h-screen">
    <AppHeader />
    <main class="flex-grow">
      <slot />
    </main>
    <AppFooter />
  </div>
</template>

API

Props

Ce composant n'accepte aucune prop.

Events

Ce composant n'émet aucun événement.

Slots

Ce composant n'expose aucun slot.

Exemples

Exemple 1 : Layout standard

<template>
  <div>
    <AppHeader />
    <main class="container mx-auto py-8">
      <slot />
    </main>
  </div>
</template>

Exemple 2 : Avec contenu personnalisé

Le composant AppHeader gère automatiquement :

• Le logo cliquable vers la page d'accueil
• Les liens de navigation (Contrat d'entretien, Dépannage)
• Le bouton de basculement du thème
• L'alerte mode administrateur (si applicable)

Aucune configuration supplémentaire n'est nécessaire.

Notes

Le composant est positionné en sticky en haut de la page (sticky top-0 z-10). L'alerte administrateur est masquée sur mobile (hidden md:flex). Le mode administrateur est géré via le composable useAuth().