AppHeader

Usage

Put one AppHeader at the top of the app shell, full width. onNavToggle adds the menu button that opens the side nav. It is one component: logo, environment, search, actions, user and company come from props, and it uses kit Logo, Badge, Button, Tooltip and Avatar inside. environment tags the instance (UAT-2, Sandbox) so people know where they are. With searchGroups, the search opens a kit GlobalSearch in its place: one search box that grows down into the results (Recent items, scopes, arrow keys and Enter); otherwise it runs onSearch; searchShortcut only shows a hint. actions are icon buttons named by a Tooltip. The avatar opens an account menu with the name, User settings, Dark mode, Density & text size and Log out; each row shows only when its handler is passed. The header follows density: its bar, search and buttons shrink in compact and grow in comfortable. Under 800px it turns compact: the logo becomes the symbol and the search becomes an icon button beside the other icons. Under 640px, the kit's mobile break, it turns phone-sized: the environment tag goes, and the row of icon actions becomes one more button holding the same actions, so onAction still tells you which was picked. Under 480px the company badge goes too; the avatar still says who is signed in. The bar answers to its own width, not the window's. Page titles, breadcrumbs and page actions belong in the page, not here. See contracts/appheader.json for the full contract.