BricksLab Catalog

@brickslab/ui-web

Barre de navigation supérieure responsive avec logo, recherche de composants et menu burger pour mobile. Composant personnalisé du catalog qui gère la navigation principale et la recherche en-tête du site.

Caractéristiques

Position fixe : Reste en haut de la page lors du scroll
Logo avec branding : Affiche le logo Brickslab avec couleurs de marque
Recherche intégrée : Champ de recherche avec suggestions en dropdown
SearchResults : Affiche les résultats de recherche filtrés
Menu burger mobile : S'affiche sur écrans de max 1024px
Responsive : Masque la barre de recherche sur très petits écrans (max 768px)

Props

Prop	Type	Défaut	Requis	Description
`children`	`ReactNode (internal)`	—	—	La barre supérieure gère sa propre structure interne avec logo, recherche et menu burger mobile.

Composants internes

// Topbar includes:
// 1. Responsive layout (fixed position top)
// 2. Logo with Brickslab branding
// 3. Search input with component filtering
// 4. SearchResults dropdown
// 5. Burger menu for mobile (<1024px)
// 6. MobileNav integration

Utilisation

Implémentation simple

tsx

import { Topbar } from "@brickslab/catalog";

export default function Page() {
  return (
    <>
      <Topbar />
      {/* Page content */}
    </>
  );
}

Démonstration interactive

Vous voyez déjà la Topbar au-dessus de cette page

La Topbar est visible en haut de l'écran avec :

Logo Brickslab
Champ de recherche
Menu burger (visible sur mobile)

Notes importantes

⚠️ La Topbar est un composant personnalisé du catalogue, non pas un composant de la librairie @brickslab/ui-web. Elle intègre la recherche, la navigation mobile et le branding global du site.