Top Bar

The bar over an app's pages: search, or where people are, at the start; the app's own actions and the account at the end. Specification: docs/components/top-bar.md

Basics

A <header class="canon-top-bar"> over an app's pages: a .canon-top-bar-start and a .canon-top-bar-end. Here the start holds the search, a Command Palette's button with its shortcut (⌘K, from anywhere); the end holds the app's own Buttons (dark mode, a toggle; notifications, with a Count in its corner) and the account: an Avatar button opening a Menu.

Narrow

When its things don't fit, the bar folds, a step at a time, and unfolds as room comes back (drag the frame's corner to try it). The search drops its shortcut, then its label; then the end's Buttons go into one More menu: a toggle there is a check, a Button with a menu a submenu. A Button with a Count (notifications) and the account stay, as does the sidebar's toggle.

Edge cases

Right to left, the start is on the right.