AppTopBar

App

Top bar wrapper passed into AppShell's header slot. The logo slot anchors the left side while children (GlobalSearch, UserMenu, Button, etc.) are arranged in a flex row. Named regions `start` (after the logo) and `end` (pushed to the far end) take a node or ordered `{ id, node, order, hidden }` items, for controls other modules contribute.

Preview

Code

<AppTopBar>
  <GlobalSearch
    onSearch={handleSearch}
    onSelect={handleSelect}
    className="flex-1 max-w-sm hidden sm:block"
  />
  <div className="ml-auto flex items-center gap-1">
    <Button variant="ghost" size="sm" iconOnly aria-label="Notifications">🔔</Button>
    <Button variant="ghost" size="sm" iconOnly aria-label="Settings">⚙️</Button>
    <UserMenu user={currentUser} />
  </div>
</AppTopBar>

Preview

Acme

Code

<AppTopBar logo={<span className="font-black text-primary text-lg">Acme</span>}>
  <div className="ml-auto flex items-center gap-2">
    <Button variant="primary" size="sm">Upgrade</Button>
    <UserMenu user={currentUser} />
  </div>
</AppTopBar>

Preview

Acme

Production

Code

// Contributed controls arrive as ordered items; hidden ones are left out.
<AppTopBar
  logo={<Logo />}
  start={<EnvironmentBadge />}
  end={[
    { id: 'notifications', order: 10, node: <NotificationBell /> },
    { id: 'calls', order: 20, node: <PresenceToggle />, hidden: !telephonyEnabled },
    { id: 'user', order: 100, node: <UserMenu user={currentUser} /> },
  ]}
/>

AppTopBar

Arama + actions + kullanıcı

Logo + action + kullanıcı

Regions: start + ordered end items