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,52 @@
+---
+title: Set up the application layout
+description: Configure the style source and compose application layout regions.
+order: 10
+toc:
+  - id: styles
+    title: Import the style source
+  - id: compose
+    title: Compose regions
+  - id: sizes
+    title: Adjust sizes
+---
+
+## Import the style source {#styles}
+
+Import the Layout Tailwind source from the application stylesheet:
+
+```css
+@import "@workspace/layout/globals.css";
+```
+
+## Compose regions {#compose}
+
+`AppLayout` accepts React nodes or component definitions without required props. Pass a node when the region needs business props, or pass a component definition when it should read layout state from context.
+
+```tsx
+<AppLayout
+  header={AppHeader}
+  rail={ActivityRail}
+  sidebar={<NavigationSidebar groups={groups} />}
+  aside={AssistantPanel}
+  footer={StatusBar}
+>
+  <RouterOutlet />
+</AppLayout>
+```
+
+Component definitions are created inside the `AppLayout` provider, so `AppHeader` and `AssistantPanel` can call `useLayoutConfig`.
+
+## Adjust sizes {#sizes}
+
+Use CSS custom properties to size the supporting columns:
+
+```css
+.application-layout {
+  --layout-rail-width: 4rem;
+  --layout-sidebar-width: 18rem;
+  --layout-aside-width: 22rem;
+}
+```
+
+Pass that class to `AppLayout`. The content column always consumes the remaining space and can shrink to zero width.