Maofeng
46 lines
1.3 KiB
Plaintext
46 lines
1.3 KiB
Plaintext
---
|
|
title: Application shell
|
|
description: Assemble the shared header, sidebar, breadcrumbs, chat, and notification surfaces.
|
|
order: 11
|
|
toc:
|
|
- id: render-app-layout
|
|
title: Render AppLayout
|
|
- id: layout-inputs
|
|
title: Layout inputs
|
|
- id: optional-preset
|
|
title: Optional preset
|
|
---
|
|
|
|
## Render AppLayout {#render-app-layout}
|
|
|
|
`AppLayout` is the integration point for the rest of this tutorial:
|
|
|
|
```tsx
|
|
import { AppLayout } from "@workspace/blocks/layout"
|
|
|
|
export function WorkspaceLayout() {
|
|
return (
|
|
<AppLayout
|
|
navigationGroups={navigationGroups}
|
|
notifications={{
|
|
queryKey: ["notifications"],
|
|
queryFn: loadNotifications,
|
|
}}
|
|
chatThreads={chatThreads}
|
|
>
|
|
<Outlet />
|
|
</AppLayout>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Layout inputs {#layout-inputs}
|
|
|
|
The shell composes `AppSidebar`, `AppBreadcrumb`, `AppQueryIndicator`, `UserMenu`, a notification sheet, and chat threads. Pass `headerActions` when the product needs additional global controls.
|
|
|
|
The route content remains the layout's `children`, so the package does not constrain the router used by the application.
|
|
|
|
## Optional preset {#optional-preset}
|
|
|
|
`@workspace/blocks/layouts/vega` provides an optional visual shell. It lives on a separate entry point so the standard layout does not include preset-specific code.
|