Brickslab.Tools

@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

Prop	Type	Défaut	Requis	Description
`children`	`ReactNode (internal)`	—	—	La sidebar gère sa propre structure interne avec navigation organisée par sections.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  children={<span>...</span>}
/>

children

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.