Usage
@prepared911/ui/blocks/app-header. The block has no stylesheet of its own; load @prepared911/ui/blocks/control-island/styles.css and the styles.css of each component the header renders (Box, Button, ButtonGroup, Icon, Menu, Navbar, Separator, Tabs, Text, UserMenu, VisuallyHidden).
AppHeader is the application header product screens render. It is Navbar composed into exactly one of the three headers of the design: Calltaker, Dispatcher or Supervisor. role is required and decides everything else: the ControlIsland at the start, the route tabs, and the controls at the end. The header has no slots and takes no children or className; a host supplies the copy, where each route goes, the state, and the handlers.
| Role | Island | Route tabs | End |
|---|---|---|---|
Calltaker | headset badge, queue, raise hand, availability pill | Live, Archived | graduation-cap, bell-ring, account cog (settings), separator, settings-2, fullscreen, x |
Dispatcher | route badge, channel, raise hand | Live, Archived | graduation-cap, bell-ring, account cog, separator, settings-2, fullscreen, x |
Supervisor | role switcher: Supervisor, Calltaker, Dispatcher | Live, Archived, Learning, Settings | bell-ring, separator, fullscreen, x |
routes is a record keyed by route, not a list, so the header decides which tabs exist and their order. Give each route an href and a label, and extraRouteMatchers when a deeper route should also mark it current. The current tab is the one whose href matches currentPath (pathname equality, or matchPath if you pass one). A tab press and an overflow row press call navigate(href). Routes that do not fit move, from the end, into a menu behind the overflowLabel control.
status and onStatusChange, or uncontrolled with defaultStatus (Busy). Set ControlIslandStatus.Ringing while a call is incoming and put the person's choice back when it ends. See ControlIsland.raisedHand and onRaisedHandChange, or defaultRaisedHand.activeRole and onActiveRoleChange, or defaultActiveRole (Supervisor). The switcher says which role the supervisor is looking at; the header stays the Supervisor header.on…Change handler gets change details; cancel them to keep the previous value.
Each end control takes a name and an optional press handler: onTrainingPress, onNotificationsPress, onPreferencesPress, onFullscreenPress and onClosePress. The controls after the separator form a group named by toolsLabel.
The bar is the page banner by default. A shell that already has a banner passes landmark={NavbarLandmark.Navigation}. sticky and stickyInset keep the bar at the top while the page scrolls. Render one AppHeader per page, where AppShell places the Navbar.
core/navbar remote (Home, Communications, Dashboard and so on) and dispatch's navbar are that case. The Navbar migration section lists every prop and shows how to move from target ids to hrefs.
AppHeader cannot carry those bars by design. Its routes are a fixed record per role with an href, a label and extraRouteMatchers (AH-3), so there is no counter, no icon and no extra tab, and it has no slots (AH-2), so there is no place for another control.
| ui-core | AppHeader | Notes |
|---|---|---|
Navbar ariaLabel | label | Required in both landmarks (AH-7). The route list's landmark is named by navigationLabel, also required |
Navbar className | not carried | No className, id, ref or style (AH-2) |
NavbarBrand ariaLabel | homeLabel | Required. The brand is always a link: homeHref is required too |
NavbarBrand variant | not carried | The brand is the Axon mark |
NavbarBrand multiApp, apps, currentApp, onSelectApp, appMenuLabel | not carried | By owner decision. Nothing in the header replaces the menu of apps; see App switcher |
NavbarTabs items | routes | A record keyed by route, not a list: { live, archived }, plus learning and settings for the Supervisor. to becomes a real href |
NavbarTabs currentPath, navigate, matchPath | currentPath, navigate, matchPath | navigate gets the route's href. currentPath is a pathname. Moving from ids to hrefs works as in Routes |
NavbarTabs overflowMenuLabel | overflowLabel | Required |
NavbarSkeleton ariaLabel | not part of AppHeader | AppHeader has no loading state. Use Navbar's NavbarSkeleton, whose ariaLabel is label |
TabNav, TabNavItem | not part of AppHeader | They become Tabs in link mode; see the Navbar section |
Combobox in the end cluster that appears when a person has more than one agency.UserMenu behind the account cog (settings, 16px), named by accountLabel. The menu shows the account name, optional email, the theme row from appearanceLabels, and Sign out last. Settings-2 stays the preferences control (preferencesLabel, onPreferencesPress) and does not open the menu. The Supervisor header has no account cog and no preferences control.
A bar that is not one of these three headers. A shell with other tabs builds its bar from the Navbar parts (see the migration section above); a change to the three headers is a change to this block.