BjDashboardSidebar

Sidebar React pour tableaux de bord : mêmes props que la version Vue, mais le bas de panneau passe par la prop footer (ReactNode) au lieu d’un slot.

import { BjDashboardSidebar } from '@flrxnt/dsbj/react'

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' },
    ],
  },
]

export function Example() {
  return (
    <BjDashboardSidebar
      brandText="Mon App"
      brandImg="/sigle.svg"
      brandHref="/"
      sections={sections}
    />
  )
}

Identique au HTML/CSS : largeur réduite, libellés masqués, icônes centrées.

<BjDashboardSidebar
  brandText="App"
  brandImg="/sigle.svg"
  brandHref="/"
  sections={sections}
  compact
/>

brandHref rend la zone marque cliquable ; logo et texte restent optionnels.

Une section peut être { links: [...] } sans title.

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

<BjDashboardSidebar brandText="Mail" sections={sections} />

Les entrées avec children ouvrent un sous-menu (état local par item, comme en Vue).

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} />

Passez un ReactNode via la prop footer pour le même emplacement que le slot Vue.

<BjDashboardSidebar
  sections={sections}
  brandText="Espace"
  footer={<p className="bj-text-sm" style={{ margin: 0 }}>user@example.com</p>}
/>

Compact + arborescence + footer dans un seul composant.

<BjDashboardSidebar
  compact
  brandText="CRM"
  brandImg="/sigle.svg"
  sections={sectionsWithNested}
  footer={<i className="ri-shield-user-line" aria-hidden />}
/>

Prop	Description
`brandText`	Texte de la marque.
`brandImg`	URL du logo.
`brandHref`	URL du bloc branding.
`sections`	Sections <code class="bj-code">{ title?, links }</code> avec liens optionnellement imbriqués.
`compact`	Mode compact.
`footer`	Contenu du pied (ReactNode).
`…`	Autres props natives de <code class="bj-code"><aside></code> (spread).

BjDashboardSidebar

Utilisation

Aperçu par défaut

Mode compact

Branding : texte, image, lien

Section sans titre

Liens enfants (collapsible)

Prop footer

Combinaison : compact + footer + sous-menu

Props