Save France
Composants

Composants de Mise en Page

Composants de structure globale de l'application (Header, Footer)

Vue d'ensemble

Les composants de mise en page définissent la structure globale de l'application. Ils sont responsables de l'agencement des différentes parties de l'interface utilisateur.

Liste des Composants

1. AppHeader

Description

En-tête principal de l'application contenant la navigation et le logo.

Structure

flowchart TD
    A[AppHeader]
    A --> B[Logo]
    A --> C[Menu Principal]
    A --> D[Menu Utilisateur]
    C --> E[Accueil]
    C --> F[Services]
    C --> G[Contact]
    D --> H[Profil]
    D --> I[Déconnexion]

Props

NomTypeRequisDéfautDescription
transparentbooleanNonfalseRend l'en-tête transparent
fixedbooleanNonfalseFixe l'en-tête en haut de la page

Événements

NomParamètresDescription
toggle-mobile-menubooleanÉmis lorsque le menu mobile est ouvert/fermé

2. AppFooter

Description

Pied de page de l'application avec les liens utiles et les informations légales.

Structure

flowchart TD
    A[AppFooter]
    A --> B[Liens Rapides]
    A --> C[Contact]
    A --> D[Réseaux Sociaux]
    A --> E[Mentions Légales]
    B --> F[Accueil]
    B --> G[Services]
    B --> H[FAQ]
    C --> I[Email]
    C --> J[Téléphone]
    D --> K[Facebook]
    D --> L[Twitter]
    D --> M[LinkedIn]

Slots

NomDescription
defaultContenu principal du pied de page
copyrightSection des droits d'auteur (par défaut : © 2023 Save France)

Utilisation des Mises en Page

Layout Principal

<!-- app.vue -->
<template>
  <div class="min-h-screen flex flex-col">
    <AppHeader />
    <main class="flex-grow">
      <NuxtPage />
    </main>
    <AppFooter />
  </div>
</template>

Layout Personnalisé

  1. Créez un nouveau composant dans layouts/ :
<!-- layouts/custom.vue -->
<template>
  <div class="custom-layout">
    <AppHeader :transparent="true" />
    <div class="content">
      <slot />
    </div>
    <AppFooter />
  </div>
</template>

<style scoped>
.custom-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
  padding: 2rem 0;
}
</style>
  1. Utilisez-le dans vos pages :
<!-- pages/custom-page.vue -->
<template>
  <div>
    <h1>Page Personnalisée</h1>
    <!-- Contenu de la page -->
  </div>
</template>

<script setup>
definePageMeta({
  layout: 'custom'
});
</script>

Comportement Réactif

Les composants de mise en page s'adaptent automatiquement à la taille de l'écran :

  • Desktop (>1024px) : Navigation complète visible
  • Tablette (768px-1024px) : Menu condensé
  • Mobile (<768px) : Menu hamburger

Personnalisation

Thème

Les couleurs et les espacements peuvent être personnalisés via les variables CSS :

:root {
  --header-height: 4rem;
  --footer-height: 8rem;
  --primary-bg: #ffffff;
  --text-color: #1a1a1a;
}

.dark {
  --primary-bg: #1a1a1a;
  --text-color: #ffffff;
}

Internationalisation

Les textes sont gérés via Nuxt i18n. Pour modifier les textes :

// locales/fr.json
{
  "header": {
    "nav": {
      "home": "Accueil",
      "services": "Services",
      "contact": "Contact"
    }
  },
  "footer": {
    "links": {
      "about": "À propos",
      "privacy": "Confidentialité",
      "terms": "Conditions d'utilisation"
    }
  }
}

Bonnes Pratiques

  1. Accessibilité
    • Utilisez des balises sémantiques (<header>, <footer>, <nav>)
    • Implémentez la navigation au clavier
    • Ajoutez des attributs ARIA appropriés
  2. Performance
    • Chargez les composants de manière asynchrone si nécessaire
    • Utilisez le lazy loading pour les images
    • Minimisez les re-rendus inutiles
  3. Maintenabilité
    • Gardez les composants modulaires
    • Documentez les props et les événements
    • Suivez les conventions de nommage

Exemple Complet

<template>
  <AppHeader 
    :transparent="isHomePage" 
    @toggle-mobile-menu="isMobileMenuOpen = $event"
  />
  
  <main 
    class="main-content"
    :class="{ 'pt-16': isMobileMenuOpen }"
  >
    <slot />
  </main>
  
  <AppFooter>
    <template #copyright>
      <div class="text-center text-sm text-gray-500">
        © {{ new Date().getFullYear() }} Save France. Tous droits réservés.
      </div>
    </template>
  </AppFooter>
</template>

<script setup>
const route = useRoute();
const isMobileMenuOpen = ref(false);

const isHomePage = computed(() => route.path === '/');
</script>

<style scoped>
.main-content {
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  padding-top: var(--header-height);
  transition: padding-top 0.3s ease;
}
</style>

Dépannage

Le menu ne s'affiche pas correctement sur mobile

  1. Vérifiez que la vue est correctement redimensionnée
  2. Vérifiez les styles CSS qui pourraient écraser les styles du composant
  3. Assurez-vous que les médias queries sont correctement définis

Les liens de navigation ne fonctionnent pas

  1. Vérifiez que les routes sont correctement configurées dans nuxt.config.ts
  2. Assurez-vous que les liens utilisent le composant NuxtLink
  3. Vérifiez la console du navigateur pour les erreurs éventuelles

Évolution Future

  • Ajouter un système de bannière d'annonce dans l'en-tête
  • Implémenter un menu déroulant pour les sous-sections
  • Ajouter des animations de transition entre les pages
  • Intégrer un sélecteur de thème sombre/clair

Ressources

Composants Partagés

Composants génériques réutilisables dans toute l'application

AddressAutocomplete

Composant d'autocomplétion d'adresse avec intégration API de géocodage