Navigation · Coque applicative

AppChrome

Stable

Coque de navigation complète : la barre du haut assemblée de design-system.sent-tech.ca, publiée comme un composant unique et paramétrable. Elle compose AppHeader et ajoute les contrôles utilitaires (sélecteur de thème, bascule clair/sombre, sélecteur de langue, lien GitHub, zone identité) plus le burger et le tiroir mobile. Entièrement CONTRÔLÉE : on passe le produit, la nav, le titre et l'état + callbacks des contrôles ; aucune logique de routage ni de persistance n'est embarquée.

Exemples

Coque applicative complète

Voir le code (Svelte)

<AppChrome
  brandName="Sentropic"
  productName="dataviz"
  logoSrc="/SENT-logo-squared.svg"
  brandHref="#"
  nav={[{"label":"Vues","href":"#views","active":true},{"label":"Données","href":"#data"},{"label":"Réglages","href":"#settings"}]}
  themes={[{"id":"sent-tech","label":"Sentropic"},{"id":"forge","label":"Forge"},{"id":"dsfr","label":"DSFR"}]}
  theme="sent-tech"
  colorMode="light"
  locale="fr"
  githubHref="https://github.com/rhanka/sent-tech-design-system"
  mobileMenuOpen={false}
/>

dataviz.sent-tech.ca obtient un chrome byte-identique en ne fournissant que product="dataviz", sa nav, le titre et l'état/callbacks des contrôles. Le markup, les classes (st-appChrome*) et les tokens sont identiques entre Svelte, React, Vue et Angular.

API

Prop	Type	Default
`brandName`	`string`	`"Sentropic"`
`productName`	`string`	–
`logoSrc`	`string`	–
`brandHref`	`string`	`"/"`
`nav`	`{ label, href, active? }[]`	`[]`
`themes`	`{ id, label }[]`	`[]`
`theme` / `onThemeChange`	`string / (id) => void`	–
`colorMode` / `onColorModeChange`	`"light"\|"dark"\|"auto" / (m) => void`	–
`locale` / `onLocaleChange`	`"fr"\|"en" / (l) => void`	–
`githubHref`	`string`	–
`identity`	`Snippet \| ReactNode \| slot`	–
`extraSelectors`	`Snippet \| ReactNode \| slot`	–
`mobileMenuOpen` / `onMobileMenuToggle`	`boolean / () => void`	`false`

Les contrôles sont contrôlés : passer la prop d'état sans son callback fige le contrôle ; omettre l'état masque le contrôle (ex. pas de colorMode → pas de bascule).

Tokens utilisés

AppChrome est token-only (zéro hex) : surfaces, bordures, textes et liens lisent les tokens sémantiques (--st-semantic-surface-*, --st-semantic-border-*, --st-semantic-text-*). Il réutilise les classes publiées d'AppHeader (st-appHeader__navLink, st-appHeader__control) pour le style canonique de la nav et des contrôles.