BjHeader

En-tête institutionnel React avec marque, raccourcis, bouton menu mobile et liste de navigation. L’état du menu est géré en interne.

Utilisation

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

export default function App() {
  return (
    <BjHeader
      serviceName="Portail démo"
      serviceTagline="Démarches en ligne"
      logo={
        <div className="bj-logo">
          <p>
            République
            <br />
            du Bénin
          </p>
        </div>
      }
      tools={
        <a href="/compte" className="bj-header__tools-link">
          <i className="ri-user-line" aria-hidden="true" />
          Mon compte
        </a>
      }
      nav={
        <>
          <li className="bj-header__nav-item">
            <a className="bj-header__nav-link" href="/">
              Accueil
            </a>
          </li>
          <li className="bj-header__nav-item">
            <a className="bj-header__nav-link" href="/demarches">
              Démarches
            </a>
          </li>
        </>
      }
    />
  )
}

Aperçu

serviceName et serviceTagline

Sans serviceName, le bloc titre/sous-titre est omis. Le tagline n’apparaît que si serviceName est défini.

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

export function ServiceOnly() {
  return (
    <BjHeader
      serviceName="Ministère"
      serviceTagline="Une république au service des citoyens"
      nav={
        <li className="bj-header__nav-item">
          <a className="bj-header__nav-link" href="/">Accueil</a>
        </li>
      }
    />
  )
}

export function TitleWithoutTagline() {
  return (
    <BjHeader
      serviceName="Sans baseline"
      nav={
        <li className="bj-header__nav-item">
          <a className="bj-header__nav-link" href="/">Accueil</a>
        </li>
      }
    />
  )
}

Contenu ReactNode à gauche dans la marque (souvent BjLogo). Peut être utilisé seul avec nav.

import { BjHeader, BjLogo } from '@flrxnt/dsbj/react'

export function WithBjLogo() {
  return (
    <BjHeader
      logo={
        <BjLogo href="/" motto="République du Bénin" tagline="Portail" />
      }
      nav={
        <li className="bj-header__nav-item">
          <a className="bj-header__nav-link" href="/">Accueil</a>
        </li>
      }
    />
  )
}

Prop tools

Raccourcis avant le bouton menu (liens, boutons). Le bouton menu est toujours rendu.

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

export function WithTools() {
  return (
    <BjHeader
      tools={
        <>
          <a href="/aide" className="bj-header__tools-link">Aide</a>
          <button type="button" className="bj-header__tools-link">FR</button>
        </>
      }
      nav={
        <li className="bj-header__nav-item">
          <a className="bj-header__nav-link" href="/">Accueil</a>
        </li>
      }
    />
  )
}

Fragments de <li className="bj-header__nav-item">… à injecter dans le ul interne.

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

export function RichNav() {
  return (
    <BjHeader
      nav={
        <>
          <li className="bj-header__nav-item">
            <a className="bj-header__nav-link bj-header__nav-link--active" href="/" aria-current="page">
              Accueil
            </a>
          </li>
          <li className="bj-header__nav-item">
            <a className="bj-header__nav-link" href="/services">Services</a>
          </li>
          <li className="bj-header__nav-item">
            <a className="bj-header__nav-link" href="/contact">Contact</a>
          </li>
        </>
      }
    />
  )
}

Prop children

Rendu après la nav, toujours dans le conteneur .bj-container.

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

export function WithChildren() {
  return (
    <BjHeader
      nav={
        <li className="bj-header__nav-item">
          <a className="bj-header__nav-link" href="/">Accueil</a>
        </li>
      }
    >
      <p className="bj-text-sm" style={{ marginTop: '1rem' }}>
        Bandeau ou alerte sous la navigation.
      </p>
    </BjHeader>
  )
}

Composition complète

Toutes les zones optionnelles combinées.

import { BjHeader, BjLogo } from '@flrxnt/dsbj/react'

export function FullHeader() {
  return (
    <BjHeader
      id="site-header"
      data-testid="app-header"
      serviceName="Portail"
      serviceTagline="Démarches"
      logo={<BjLogo size="lg" href="/" src="/sigle.svg" alt="Bénin" />}
      tools={
        <a href="/compte" className="bj-header__tools-link">
          <i className="ri-user-line" aria-hidden="true" /> Compte
        </a>
      }
      nav={
        <>
          <li className="bj-header__nav-item">
            <a className="bj-header__nav-link" href="/">Accueil</a>
          </li>
          <li className="bj-header__nav-item">
            <a className="bj-header__nav-link" href="/démarches">Démarches</a>
          </li>
        </>
      }
    >
      <div className="bj-container" style={{ paddingBottom: '0.5rem' }}>
        <span className="bj-badge">Bêta</span>
      </div>
    </BjHeader>
  )
}

Attributs natifs du header

Les props HTML du header (id, role, data-*, onClick sur le root si besoin) sont fusionnées sur l’élément <header>.

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

export function WithNativeAttrs() {
  return (
    <BjHeader
      className="my-header"
      role="banner"
      aria-label="En-tête du site"
      data-analytics="header-v2"
      nav={
        <li className="bj-header__nav-item">
          <a className="bj-header__nav-link" href="/">Accueil</a>
        </li>
      }
    />
  )
}

Props

Prop	Description
`serviceName`	Titre du service affiché à côté du logo.
`serviceTagline`	Sous-titre optionnel sous le titre du service.
`logo`	Contenu React pour le bloc logo (souvent BjLogo ou image).
`tools`	Raccourcis à droite (liens, boutons) avant le bouton menu.
`nav`	Contenu des éléments de liste : passer des balises li avec liens pour remplir bj-header__nav-list.
`children`	Contenu rendu après la navigation, dans le conteneur.
`…rest`	Attributs natifs du header et className fusionnés sur l’élément racine.