Brickslab.

@brickslab/ui-web

Barre de navigation latérale fixe pour desktop avec sections organisées de composants du catalogue. Composant personnalisé du catalogue avec détection de page active et responsive.

Caractéristiques

  • Navigation structurée : 9 sections organisées par type de composant
  • Position fixe : Reste visible lors du scroll (width: 232px)
  • Active state : Indicateur visuel de la page actuelle
  • Style actif : Couleur de marque (#CC4A48) avec fond subtil
  • Scroll interne : Navigation scrollable avec contenu long
  • Cachée sur mobile : Masquée au profit du BurgerMenu sur écrans de max 1024px

Sections incluses

  • Layout & Shell : Composants de structure (AppShell, HeaderBar, SidebarNav, TopNav, FooterBar, BurgerMenu)
  • Navigation : Éléments de navigation (LogoMark, SearchBar, MenuTree, Breadcrumb)
  • Catalogue / Docs : Composants de documentation (SectionGallery, PropsTable, CodeBlock, etc.)
  • Carrousel : Composants carousel
  • Cards & Contenus : Cartes et panels de contenu
  • Typographie : Composants texte (Heading, Text, TextBlock)
  • UI Controls : Contrôles UI (ToggleSwitch, TagChip, StatusLabel, etc.)
  • Footer : Composants footer
  • Sections : Grandes sections de page

Props

PropTypeDéfautRequisDescription
childrenReactNode (internal)——La sidebar gère sa propre structure interne avec navigation organisée par sections.

Démonstration

Vous voyez la Sidebar à gauche de cette page

La Sidebar est visible à gauche avec :
  • 9 sections de composants
  • Navigation complète du catalogue
  • Indicateur de page active
  • Largeur fixe de 232px

Utilisation

tsx
import { Sidebar } from "@brickslab/catalog";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div style={{ display: "flex" }}>
      <Sidebar />
      <main style={{ flex: 1, marginLeft: "232px" }}>
        {children}
      </main>
    </div>
  );
}

Notes

⚠️ La Sidebar est un composant personnalisé du catalogue. Elle est masquée sur mobile et remplacée par le BurgerMenu. La détection de page active se fait via le hook usePathname() de Next.js.