27 lines
1.2 KiB
Markdown
27 lines
1.2 KiB
Markdown
# @add-ideas/toolbox-shell-react
|
|
|
|
```tsx
|
|
import { AppShell } from "@add-ideas/toolbox-shell-react";
|
|
import "@add-ideas/toolbox-shell-react/styles.css";
|
|
|
|
<AppShell app={manifest} helpAction={{ onClick: () => setHelpOpen(true) }}>
|
|
<App />
|
|
</AppShell>;
|
|
```
|
|
|
|
`AppShell` discovers `?toolbox=...` or `<meta name="toolbox">`, but continues in
|
|
standalone mode if context is absent, unavailable, cross-origin, or invalid. Its
|
|
app switcher is exposed as the accessible navigation landmark
|
|
`Toolbox applications` and all destinations use ordinary document navigation.
|
|
The fixed top row exposes Personalize, Apps, Gitea source, and Help in that
|
|
order, a centered title/subtitle, and a Toolbox home/brand block. Personalize
|
|
offers light/dark/system mode by default. Version, privacy, and application
|
|
actions render in the standard footer so connected and standalone headers keep
|
|
the same geometry.
|
|
|
|
`ToolboxHeader` is exported separately for custom shells. Its
|
|
`personalizeContent` prop puts custom preferences inside the shared controlled
|
|
popover, while `brandIconUrl` supplies a portal favicon; an inline Toolbox cube
|
|
is the fallback. Personalize and Apps popovers are mutually exclusive and close
|
|
on Escape, outside interaction, or link selection.
|