DSBJ - Design Système du Bénin

<script setup>
import { BjDashboardSidebar } from '@flrxnt/dsbj/vue'

const sections = [
  {
    title: 'Principal',
    links: [
      { label: 'Tableau de bord', to: '/dashboard', icon: 'ri-dashboard-line', active: true },
      { label: 'Statistiques', to: '/stats', icon: 'ri-bar-chart-line' },
    ],
  },
]
</script>

<template>
  <BjDashboardSidebar
    brand-text="Mon App"
    brand-img="/sigle.svg"
    brand-href="/"
    :sections="sections"
  />
</template>

La classe bj-dashboard-sidebar--compact masque libellés et titres ; gardez des icônes sur chaque lien.

<BjDashboardSidebar
  brand-text="App"
  brand-img="/sigle.svg"
  brand-href="/"
  :sections="sections"
  compact
/>

Toutes les props de marque sont optionnelles : texte seul, image seule, ou les deux ; brand-href rend le bloc en lien.

Une entrée de sections peut omettre title : seule la liste de liens est rendue.

const sections = [
  {
    links: [
      { label: 'Inbox', to: '/inbox', icon: 'ri-inbox-line' },
    ],
  },
]

<BjDashboardSidebar brand-text="Mail" :sections="sections" />

Si un lien possède children, un bouton repliable affiche les sous-liens (clé interne : to du parent).

const sections = [
  {
    title: 'Projet',
    links: [
      {
        label: 'Fichiers',
        to: '/files',
        icon: 'ri-folder-line',
        children: [
          { label: 'Notes', to: '/files/notes', icon: 'ri-file-text-line' },
        ],
      },
    ],
  },
]

<BjDashboardSidebar :sections="sections" />

Le slot #footer est rendu dans .bj-dashboard-sidebar__footer lorsqu’il est fourni.

<BjDashboardSidebar :sections="sections" brand-text="Espace">
  <template #footer>
    <p class="bj-text-sm" style="margin:0">user@example.com</p>
  </template>
</BjDashboardSidebar>

Exemple combinant compact, un parent avec children et le slot footer.

<BjDashboardSidebar
  compact
  brand-text="CRM"
  brand-img="/sigle.svg"
  :sections="sectionsWithNested"
>
  <template #footer>
    <i class="ri-shield-user-line" aria-hidden="true" />
  </template>
</BjDashboardSidebar>

Prop	Description
`brandText`	Texte de la marque.
`brandImg`	URL de l’image du logo.
`brandHref`	Lien sur le bloc branding (sinon <code class="bj-code"><div></code>).
`sections`	Tableau de <code class="bj-code">{ title?, links[] }</code> ; chaque lien peut avoir <code class="bj-code">children</code>.
`compact`	Mode compact (icônes seules, largeur réduite).
`footer (slot)`	Slot <code class="bj-code">footer</code> pour le contenu sous la navigation.
`…`	Attributs additionnels sur la racine <code class="bj-code"><aside></code> (héritage Vue 3).

BjDashboardSidebar

Utilisation

Aperçu par défaut

Mode compact

Branding : texte, image, lien

Section sans titre

Liens enfants (collapsible)

Slot footer

Combinaison : compact + footer + sous-menu

Props