30 lines
1.4 KiB
Markdown
30 lines
1.4 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 a Toolbox home/brand block at the far left, a centered
|
|
title/subtitle, and Help, Gitea source, Apps, and Personalize at the far right
|
|
in that order. Personalize uses the portal-style panel and 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. `ToolboxPersonalizePanel` shares the portal heading, optional
|
|
storage warning, and appearance picker with custom preference content.
|
|
Personalize and Apps popovers are mutually exclusive and close on Escape,
|
|
outside interaction, or link selection.
|