DocsLayout() — ui Function Reference

Architecture documentation for the DocsLayout() function in layout.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ DocsLayout() — ui Function Reference

Dependency Diagram

graph TD
  399a6e20_59c1_b25b_2cad_fe9233dd7d93["DocsLayout()"]
  541868af_dadb_399d_0098_13e4e94fc298["layout.tsx"]
  399a6e20_59c1_b25b_2cad_fe9233dd7d93 -->|defined in| 541868af_dadb_399d_0098_13e4e94fc298
  style 399a6e20_59c1_b25b_2cad_fe9233dd7d93 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/docs/layout.tsx lines 5–25

export default function DocsLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="container-wrapper flex flex-1 flex-col px-2">
      <SidebarProvider
        className="3xl:fixed:container 3xl:fixed:px-3 min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--top-spacing:calc(var(--spacing)*4)]"
        style={
          {
            "--sidebar-width": "calc(var(--spacing) * 72)",
          } as React.CSSProperties
        }
      >
        <DocsSidebar tree={source.pageTree} />
        <div className="h-full w-full">{children}</div>
      </SidebarProvider>
    </div>
  )
}