Gabarit · Workspace B2B

Sidebar + contenu

Disponible

Gabarit B2B le plus courant : chrome applicatif en haut, navigation latérale persistante à gauche (SideNav), zone de contenu principale à droite. La nav reste collée ; le contenu défile. Idéal pour les pages d'admin et de paramètres.

Rendu multi-framework

Utilisez les onglets pour basculer entre Svelte, React, Vue et Angular.

Sidebar + contenu (données mock)

Console

Tableau de bord

Zone de contenu principale. La navigation latérale reste collée (sticky) ; le contenu défile indépendamment.

Activité récente

14 actions au cours des 24 dernières heures.

Tâches assignées

6 tâches ouvertes, 2 arrivent à échéance cette semaine.

Déploiements

Dernière mise en prod il y a 3 h, statut sain.

Voir le code (Svelte)

<div class="sc-shell">
  <Header
    title="Console"
    navItems={[{"label":"Tableau de bord","href":"#","active":true},{"label":"Projets","href":"#"},{"label":"Équipe","href":"#"},{"label":"Paramètres","href":"#"}]}
  />
  <div class="sc-body">
    <aside class="sc-aside">
      <SideNav
        items={[{"label":"Tableau de bord","href":"#","active":true},{"label":"Projets","href":"#"},{"label":"Équipe","href":"#"},{"label":"Paramètres","href":"#"}]}
        label="Sections"
      />
    </aside>
    <main class="sc-main">
      <Breadcrumb items={[{"label":"Accueil","href":"#"},{"label":"Tableau de bord","current":true}]} />
      <h2 class="sc-page-title">Tableau de bord</h2>
      <p class="sc-page-lead">Zone de contenu principale. La navigation latérale reste collée (sticky) ; le contenu défile indépendamment.</p>
      <div class="sc-cards">
        <Card>
          <h3 class="sc-card-title">Activité récente</h3>
          <p class="sc-card-body">14 actions au cours des 24 dernières heures.</p>
        </Card>
        <Card>
          <h3 class="sc-card-title">Tâches assignées</h3>
          <p class="sc-card-body">6 tâches ouvertes, 2 arrivent à échéance cette semaine.</p>
        </Card>
        <Card>
          <h3 class="sc-card-title">Déploiements</h3>
          <p class="sc-card-body">Dernière mise en prod il y a 3 h, statut sain.</p>
        </Card>
      </div>
    </main>
  </div>
</div>

Composants DS utilisés

Quand l'utiliser

Pages d'administration à profondeur de nav modeste (2 niveaux max)
Pages de paramètres organisées en sections distinctes
Interfaces B2B où la nav est stable entre les pages