Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Blocks
  2. Drawer Host
  3. Usage

Drawer host

Usage

Overview
DrawerHost from @prepared911/ui/blocks/drawer-host is the app drawer a shell mounts once. The shell owns whether it is open and which id it shows. The host renders that one drawer, swaps the content when the id changes, and can show a nav strip under the header. Use it where a shell used to mount a drawer portal and drive several drawers through one module store. A single panel that is not the shared app drawer still uses Drawer. A record with an unsaved-changes guard uses DetailDrawer.
When to use
  • The shell's shared drawer. Diagnostics, layers, and chat take turns in one panel.
  • State the shell already owns. The drawer search param stays on the shell route. Pass open and drawerId, or pass a store the shell created with createDrawerHostStore.
  • A nav strip inside that drawer. Pass nav on the drawer entry. The host renders the same segmented strip as DrawerNav.
When not to use
  • One record with a dirty form. Use DetailDrawer.
  • A form drawer with a sticky footer. Use FormLayoutDrawer.
  • A remote writing the shell URL. Remotes do not set the drawer search param. They ask the shell, and the shell updates the host.
State
Pass open, drawerId, and onOpenChange, or pass store. Do not pass both. createDrawerHostStore returns a new store each call. The shell holds it. The package does not keep a shared store, so two copies of the package do not share open state.
Changing drawerId while open is true replaces the header and the body in the same dialog.
Focus
Escape closes the drawer and focus returns to trigger. Open it from a row and omit trigger: focus returns to the element that was focused before the drawer opened.
Previous
App Header / Accessibility
Next
Drawer host / API and Development
On this page
Overview
When to use
When not to use
State
Focus