docs(layout): document app layout composition

2026-09-30 01:30:56 +08:00
parent ffda0b9099
commit 57d006a39b
10 changed files with 573 additions and 0 deletions
@@ -0,0 +1,54 @@
+---
+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.