Back to Components

GSSidebar

La sidebar de navigation : fond surface (Cloud/50), header (logo + wordmark), nav en accordéon, bloc d’actions en bas et profil utilisateur en pied. C’est le composant maître utilisé tel quel par l’app (terraforming-next AppSidebar.vue). Elle se plie en rail (64px) et passe en drawer mobile tout seul selon la largeur de son parent — zéro câblage côté consumer.

Playground responsive

Playground — sidebar responsive

Drawer (burger)0px

Tire la poignée en bas à droite (ou utilise un preset) et observe `GSSidebar` passer de complète → rail forcé → drawer mobile. Le composant détecte la largeur de son parent et s'adapte tout seul — zéro câblage. Pour démo mobile, clique Agrandir : le bandeau mobile (`position: fixed`) sera ancré en haut du viewport, donc rendu propre.

Largeur

Avis

Réputation · 12 établissements

Cette zone illustre la sidebar dans son contexte. La composition (nav accordéon, bloc bas, admin, profil) reproduit l'app réelle.

<512px drawer auto (burger + overlay + slide-in) · 512–768px rail forcé · ≥768px pli/dépli manuel via le bouton header ().

Anatomie & règles

Structure & API

La composition vit dans le composant : on passe les données, pas le squelette.

  • main-items / bottom-items / admin-items — la nav (accordéon principal, bloc bas mt-auto, accordéon admin). Accordéon unifié via v-model:open : un seul item ouvert à la fois sur toute la sidebar.
  • user — profil du pied (dropdown). logo / title — en-tête (cliquable → logo-to, accueil / par défaut).
  • toggleable + @update:collapsed — bouton de pli/dépli dans l’en-tête.
  • theme-picker — ajoute le GSThemePicker (couleur principale + mode clair/sombre/système) dans le pied, à côté du profil. Remplace un bouton « passer en dark mode » isolé chez les consumers (terra-next).
  • Slots #header / #default / #footer prioritaires pour les cas spécifiques (rétrocompat).

Dimensions & responsive auto-managé

  • ≥ 768px : sidebar complète 220px ⇄ rail 64px (toggle manuel via le bouton header).
  • 512–768px : rail forcé, toggle masqué (préserve l'espace de contenu).
  • < 512px : bandeau pleine largeur (logo + burger) en position: fixed, drawer en overlay au clic, slide-in, ESC pour fermer, body scroll-lock pendant l'ouverture, bandeau qui se masque au scroll vers le bas.
  • Toute la logique mobile vit dans le composant (BIM-1523). Le consumer ne câble rien.
  • En rail, les items à enfants s’ouvrent en popover/tooltip au survol.
  • Pas de bordure côté contenu : la séparation se fait par le fond surface.
  • Échappatoire avancée : :block="true" désactive l'auto-mobile pour les cas où un consumer pilote son propre drawer.

La nav utilise UNavigationMenu (aucun équivalent GS*), comme l’app réelle. Tout le reste passe par des wrappers GS*.