Aller au contenu principal

Navigation

Problème​

L'utilisateur doit savoir où il est et où il peut aller en un coup d'œil. Une navigation fiable réduit la charge cognitive sur un outil consulté plusieurs fois par jour.

Architecture de navigation Patrimo​

┌──────────────┬────────────────────────────────────┐
│  Sidebar     │  Header (titre page, actions)      │
│              ├────────────────────────────────────┤
│  Logo        │                                    │
│  Dashboard   │  <main> contenu                    │
│  Comptes     │                                    │
│  Budget      │                                    │
│  Import      │                                    │
│  Analytics   │                                    │
│              │                                    │
│  Settings    │                                    │
│  Logout      │                                    │
└──────────────┴────────────────────────────────────┘
  • Largeur : 240 px étendue, 64 px repliée
  • Toggle : bouton en haut-droite de la sidebar (ChevronLeft / ChevronRight)
  • État actif : fond var(--color-accent)/10 + texte var(--color-accent-strong) + barre verticale gauche
  • Hover : fond var(--color-surface-hover)
  • Sticky (position fixed) — ne défile pas avec le contenu

État actif​

Déterminé par usePathname() + comparaison préfixe :

const isActive = pathname === href || pathname.startsWith(`${href}/`);

Règles​

  • Un seul item actif à la fois par niveau
  • Icône 16 px à gauche du label dans la nav
  • Pas de badge ni compteur pour l'instant (évolution possible avec les notifications V2)
  • Header de page : titre + actions (CTA primaire à droite) — pas de breadcrumbs actuellement (profondeur max = 2 niveaux)

Mobile​

Non adressé à ce jour — voir Responsive. Une future version devra remplacer la sidebar par un drawer.

À ne pas faire​

  • Deux items actifs simultanément (confusion sur la route courante)
  • Changer la sidebar selon la page (incohérence)
  • Cacher le logout dans un menu obscur (doit rester accessible en 1 clic)

Voir aussi​