Portal Top Bar

ready

Licensee-facing header — agency mark, messages, identity, language.

The Portal Top Bar is the header a licensee sees, not a staff member — the counterpart to the topbar baked into each staff product’s AppLayout, built as its own audience rather than a themed variant of that one. Where the staff topbar carries a module switcher and the fixed AARE mark, this carries the regulator’s own Agency Logo, the licensee’s identity and licence number, and a language selector.

It has no nav toggle of its own. Portal’s primary nav (@portal/components/PortalNav, still product-private) carries its own collapse/expand controls — a “Collapse” link when expanded, a rail icon when collapsed — so a second trigger in the header would only duplicate a control the nav already provides.

Anatomy

TC Tina Campbell (859-U-974)
  1. 1 Agency Logo — white-label mark, links to Portal's own home
  2. 2 Messages — unread-count badge
  3. 3 Identity — avatar initials, name, licence number
  4. 4 Language — current language, e.g. "EN"

Variants

Default

TC Tina Campbell (859-U-974) 
<PortalTopBar agencyName="AARE" userName="Tina Campbell" licenceNumber="859-U-974" unreadCount={4} />

No unread messages

The badge only appears once there’s a count to show.

TC Tina Campbell (859-U-974) 
<PortalTopBar agencyName="AARE" userName="Tina Campbell" licenceNumber="859-U-974" />

The white-label mark on its own — a placeholder glyph on the brand color until a regulator supplies a real uploaded logo, at which point it renders an <img> in the same slot. Its color follows the data-agency theme override, same as every other brand-colored element on the page.

<AgencyLogo name="AARE" />

Usage

✓ Do
TC Tina Campbell (859-U-974)

Use for any screen inside the Portal shell — it's the one header a licensee sees.

✕ Don't
TC Tina Campbell

Don't add a menu button here to open or close the nav — that control already lives inside Portal Nav.

Accessibility

  • The Agency Logo is a real link with visible text, not an icon alone.
  • Messages is an IconButton with an accessible label; the badge is supplementary, not the only way to know there’s an unread count.
  • Focus order follows reading order: logo, messages, identity, language.

Props

PropTypeDefaultNotes
agencyNamestring"AARE"Passed through to Agency Logo.
userNamestring"Tina Campbell"The signed-in licensee.
licenceNumberstring—Shown next to the name in parentheses.
unreadCountnumber0Messages badge; hidden at 0.
languagestring"EN"Current language code shown in the selector.
  • Icon Button — the Messages control.
  • Tokens — the data-agency theme layer that colors the logo.