Composant · Structure

Header

Documenté

Le composant Header compose l'en-tête applicatif complet : marque (logo + titre), navigation primaire, actions utilitaires et zone compte. La zone compte gère nativement les trois états d'identité : anonyme, connecté avec photo, connecté avec initiales. Une identité connectée affiche toujours le nom (jamais un carré sans libellé).

Header complet

En conditions réelles, le Header réunit la marque à gauche, la navigation au centre, puis les actions et le compte à droite. C'est l'assemblage utilisé par la barre du haut de cette documentation.

Application connectée

Marque (logo + nom + produit), navigation primaire et zone actions (jour/nuit, langue, compte avec menu). Cliquez sur l'identité pour ouvrir le menu compte.

Sentropic Console

Les deux états de connexion

Dans AppHeader, la zone actions couvre les deux cas d'authentification : anonyme (icône carrée personne avec déclencheur de connexion) et connecté (IdentityMenu compact à initiales aux côtés des contrôles jour/nuit et langue).

1. Anonyme

Aucune identité fournie. Les actions utilitaires incluent un bouton icône « personne » (carré) avec aria-haspopup pour déclencher la connexion — pas de CTA textuel.

2. Connecté (initiales)

La zone actions porte le menu d'identité compact (IdentityMenu en compact) : avatar à initiales (« AM » pour « Alex Martin ») aux côtés des contrôles jour/nuit et langue. Cliquez sur l'avatar pour ouvrir le menu compte.

IdentityMenu : quatre modes

Le composant IdentityMenu se décline en quatre rendus selon l'espace et l'état d'authentification : grand (avatar + nom + chevron), grand avec email visible, compact (carré gris à initiales) et déconnecté compact (carré icône bonhomme).

1. Mode grand (avatar + nom)

Avatar cercle primary + nom + chevron. Rendu par défaut (non compact, variant dropdown) : idéal quand l'espace le permet (tiroir, page compte).

2. Mode grand (avatar + nom + email)

Quand l'email doit être visible dans le déclencheur, on assemble le layout avec les classes publiées (st-identityMenu__avatar, __name, __email) : avatar à initiales, nom en gras, email en sous-titre, chevron. C'est aussi le rendu du déclencheur en variant accordion (tiroir mobile).

Alex Martin [email protected]

3. Mode compact (carré gris)

Trigger carré encadré gris (même gabarit qu'un bouton icône st-appHeader__control) avec avatar carré à initiales (« AM »), sans nom ni chevron. Utilisé dans l'en-tête où l'espace est compté.

4. Mode déconnecté compact

Sans identité authentifiée et en compact, le composant rend un carré icône « bonhomme » (même gabarit 2.25rem que le trigger compact connecté) plutôt qu'un bouton textuel. Idéal dans la zone actions d'un header.

Règles de la zone compte

Le nom est obligatoire et toujours visible. Un état connecté ne se réduit jamais à un avatar muet ; account.name est requis.
Avatar photo : quand avatarUrl est défini, l'image est rendue dans un conteneur carré 32×32 avec object-fit: cover.
Fallback initiales : sans photo, les initiales s'affichent dans le même gabarit. Elles sont dérivées du nom si initials n'est pas fourni.
Anonyme : sans account, fournir onSignIn (et éventuellement signInLabel) pour afficher un CTA de connexion.
Menu compte : le panneau accountMenu n'est rendu que si accountMenuOpen est vrai ; l'état d'ouverture est contrôlé par le parent.

AppHeader : chrome de site réutilisable

AppHeader est l'en-tête « tenant » du socle (burger à droite en compact, tiroir intégré). Il porte désormais la marque canonique paramétrable (logo carré + nom + sous-titre produit) et publie deux classes utilitaires : sans qu'un consommateur ait à dupliquer le CSS de la doc : un site externe (ex. dataviz.sent-tech.ca) obtient le même rendu que ce site en passant uniquement ses libellés.

Mode A — produit seul (`productName` uniquement)

Sans brandName, seul le nom produit est affiché dans la zone marque. Cas d'usage : application mono-produit où la marque parente n'est pas exposée dans le chrome.

Mode B — marque + produit (`brandName` + `productName`)

Avec brandName et productName, le bloc marque affiche le nom de la société en gras puis le produit en sous-titre. Les liens de nav portent st-appHeader__navLink (pill soulignée + état actif via aria-current="page") ; les contrôles utilitaires portent st-appHeader__control (pill thème / langue / icône).

API ajoutée (marque)

Prop	Type	Description
`brandName`	`string`	Nom de marque (ex. « Sentropic »). Affiché en gras.
`productName`	`string`	Sous-titre produit sous le nom (ex. « Design System », « dataviz »).
`logoSrc`	`string`	Source de l'image du logo carré (32×32).
`logoAlt`	`string`	Texte alternatif du logo (décoratif par défaut, `aria-hidden`).
`brandHref`	`string`	Cible du lien de marque. Défaut : `/`.
`brandLabel`	`string`	`aria-label` du lien (sinon dérivé de `brandName` + `productName`).

Le snippet logo reste prioritaire si fourni : la marque par props ne s'active que lorsqu'aucun logo n'est passé et qu'au moins une de ces props est présente (rétro-compatible).

Consommation multi-framework (parité stricte)

L'API est identique en Svelte (props + snippets nav/actions/drawer), React (props + nœuds nav/actions) et Vue (props + slots). Côté dataviz.sent-tech.ca (Svelte), l'en-tête se réduit à :

<AppHeader
  brandName="Sentropic"
  productName="Console"
  logoSrc="/SENT-logo-squared.svg"
  brandHref="/"
  nav={topNav}        <!-- <a class="st-appHeader__navLink" aria-current="page"> -->
  actions={controls}  <!-- <button class="st-appHeader__control"> ... -->
  {compact} menuOpen={open} onMenuToggle={toggle} drawer={mobileNav}
/>

Accessibilité

L'élément racine est un <header> avec aria-label (prop label) ; la navigation est un <nav aria-label="Primary">.
Le déclencheur compte est un <button> avec aria-haspopup="menu", aria-expanded reflétant l'état du menu, et aria-label="Compte de {nom}" pour annoncer l'identité.
L'avatar (photo ou initiales) est aria-hidden : il est purement décoratif, l'identité étant déjà portée par le texte du nom.
Le panneau ouvert expose role="menu" et un aria-label nommant l'utilisateur. La gestion de la fermeture au clic extérieur / touche Échap relève du parent.

API du composant

Prop	Type	Par défaut	Description
`title`	`string`	optionnel	Titre textuel affiché à côté du logo.
`label`	`string`	`"Application header"`	`aria-label` de l'élément `<header>`.
`sticky`	`boolean`	`true`	Colle l'en-tête en haut du viewport (`position: sticky`).
`logo`	`Snippet`	optionnel	Contenu de la marque (image, wordmark…).
`navigation`	`Snippet`	optionnel	Navigation primaire, rendue dans un `<nav>` centré.
`actions`	`Snippet`	optionnel	Actions utilitaires à droite (recherche, notifications, sélecteurs…).
`account`	`HeaderAccount`	optionnel	Identité connectée. Active la zone compte (avatar/initiales + nom + email).
`accountMenu`	`Snippet`	optionnel	Contenu du panneau de menu compte (rendu si ouvert).
`accountMenuOpen`	`boolean`	`false`	État d'ouverture du menu compte (contrôlé par le parent).
`onAccountTriggerClick`	`() => void`	optionnel	Callback au clic sur le bouton compte (basculer le menu).
`signInLabel`	`string`	`"Se connecter"`	Libellé du CTA de connexion (état anonyme).
`onSignIn`	`() => void`	optionnel	Callback du CTA de connexion. Affiche le CTA quand `account` est absent.
`children`	`Snippet`	optionnel	Contenu additionnel rendu en fin d'en-tête.
`class`	`string`	optionnel	Classe(s) CSS supplémentaire(s).
Autres attributs	`HTMLAttributes<HTMLElement>`	N/A	Propagés sur l'élément `<header>`.

Type `HeaderAccount`

Champ	Type	Description
`name`	`string`	Nom affiché. Requis : pas d'identité sans nom.
`email`	`string?`	Email affiché sous le nom et dans le menu.
`avatarUrl`	`string \| null`	URL de la photo. Si absente/`null`, on rend les initiales.
`initials`	`string?`	Initiales explicites. Sinon dérivées du `name`.

Tokens utilisés

--st-component-control-hoverBorder
--st-component-control-hoverBackground