@vis-a-vis/app-shell

Header kit for vis-a-vis platform apps: the 9-dot app launcher (waffle), a slot-based account menu, and the app-registry client. Bring your own auth token — the package has zero auth, i18n, or styling-framework dependencies.

Install

npm install @vis-a-vis/app-shell

Use

import { AppLauncher, AccountMenu } from '@vis-a-vis/app-shell';
import '@vis-a-vis/app-shell/styles.css';

<AppLauncher getToken={() => auth.accessToken} currentAppId="myapp" />
<AccountMenu
  name={user.name}
  pictureUrl={pictureUrl} // optional
  items={[{ label: 'Abmelden', onSelect: () => logout() }]}
/>

pictureUrl (optional, string | null) shows a profile picture over the initial in the account button; if the image fails to load, the initial stays.

getToken must return a Keycloak access token for the prod-sharemembers realm; the launcher calls GET /v2/apps on the identity service (identityBaseUrl, default https://member-id.vis-a-vis.net) and renders the apps the signed-in member may see. CORS: your app's origin must be allowed by the identity service.

Theming

All colors/sizes come from CSS custom properties (--vav-shell-*) declared in styles.css with light defaults and dark values under prefers-color-scheme: dark, .dark, and [data-theme="dark"]. Override them in your own CSS to match your app.

MIT — part of the shaRe / vis-a-vis platform.