Aller au contenu principal

Layouts

Statut​

Document de cadrage frontend — version initiale.

Rôle​

Les layouts structurent l'expérience : navigation, hiérarchie, zones de contenu, actions principales et adaptation mobile.

Ils doivent être stables, prévisibles et sobres.

État actuel visible​

Dans dmv-public :

  • app/layout.tsx définit le layout racine ;
  • LayoutWrapper est utilisé autour des pages ;
  • un header, un footer et des liens légaux existent ;
  • mon-espace/layout.tsx isole l'espace utilisateur ;
  • les pages communales utilisent des composants dédiés.

Dans dmv_backoffice :

  • src/components/Layout.jsx porte la navigation principale ;
  • la sidebar gère rôles, badges et mode mobile ;
  • des composants PageLayout et Panel existent ;
  • les pages sont affichées dans le layout protégé.

Principes publics​

  • Navigation simple.
  • Accès rapide à la commune et aux contenus.
  • Priorité au contenu local.
  • Largeur lisible.
  • Footer et liens légaux accessibles.
  • Layout responsive sans rupture.

Principes backoffice​

  • Navigation métier claire.
  • Densité adaptée aux tâches admin.
  • Badges utiles mais non envahissants.
  • Accès mobile possible, sans viser la même expérience que le public.
  • Actions principales visibles.
  • États de chargement cohérents.

Layout mobile​

Le layout mobile doit :

  • éviter les menus trop profonds ;
  • garder les actions principales accessibles ;
  • limiter les éléments fixes qui masquent le contenu ;
  • tenir compte des zones sûres mobiles ;
  • respecter les tailles tactiles.

Vision cible​

La cible est une famille de layouts :

  • layout public DMV ;
  • layout espace utilisateur ;
  • layout backoffice ;
  • layout mairie futur ;
  • layout PlayLoop administration futur ;
  • layout AssoSuite futur.

Chaque layout doit répondre à son usage sans réinventer les composants de base.

Points à clarifier​

  • Navigation cible entre DMV public et espace utilisateur.
  • Layout mairie dédié ou backoffice spécialisé.
  • Cohérence des layouts futurs PlayLoop et AssoSuite.
  • Gestion des menus sur mobile et tablette.
  • Conventions de largeur, padding et zones sticky.