Maofeng
55 lines
1.3 KiB
Plaintext
55 lines
1.3 KiB
Plaintext
---
|
|
title: Workspace layout
|
|
description: Compose navigation, content, and an AI assistance panel.
|
|
order: 30
|
|
toc:
|
|
- id: layout
|
|
title: Create the layout
|
|
- id: controls
|
|
title: Add controls
|
|
---
|
|
|
|
## Create the layout {#layout}
|
|
|
|
```tsx
|
|
export function Workspace() {
|
|
return (
|
|
<AppLayout
|
|
className="application-layout"
|
|
header={WorkspaceHeader}
|
|
rail={ActivityRail}
|
|
sidebar={Explorer}
|
|
aside={Assistant}
|
|
footer={StatusBar}
|
|
defaultLayout={{
|
|
headerStart: "content",
|
|
footerStart: "sidebar",
|
|
}}
|
|
>
|
|
<Editor />
|
|
</AppLayout>
|
|
)
|
|
}
|
|
```
|
|
|
|
After the user collapses the Sidebar, Header and Footer regions starting at `"sidebar"` automatically move inward to the content column without retaining an empty grid track.
|
|
|
|
## Add controls {#controls}
|
|
|
|
```tsx
|
|
function WorkspaceHeader() {
|
|
const { layout, toggleAside, toggleSidebar } = useLayoutConfig()
|
|
|
|
return (
|
|
<header>
|
|
{layout.sidebarCollapsible && (
|
|
<button onClick={toggleSidebar}>Explorer</button>
|
|
)}
|
|
{layout.asideEnabled && <button onClick={toggleAside}>Assistant</button>}
|
|
</header>
|
|
)
|
|
}
|
|
```
|
|
|
|
The control component does not need callbacks threaded through the application; component slots are created inside the layout context.
|