DashboardLayout() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ DashboardLayout() — ui Function Reference

Dependency Diagram

graph TD
  47f48fc8_c1cd_0673_d755_64c7f2a1edbd["DashboardLayout()"]
  b7f0f4e9_2143_dd41_b7b8_da86fa0e74b7["layout.tsx"]
  47f48fc8_c1cd_0673_d755_64c7f2a1edbd -->|defined in| b7f0f4e9_2143_dd41_b7b8_da86fa0e74b7
  style 47f48fc8_c1cd_0673_d755_64c7f2a1edbd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(examples)/dashboard/layout.tsx lines 12–36

export default async function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const cookieStore = await cookies()
  const defaultOpen = cookieStore.get("sidebar_state")?.value === "true"

  return (
    <SidebarProvider
      defaultOpen={defaultOpen}
      style={
        {
          "--sidebar-width": "calc(var(--spacing) * 72)",
        } as React.CSSProperties
      }
    >
      <AppSidebar variant="inset" />
      <SidebarInset>
        <SiteHeader />
        <div className="flex flex-1 flex-col">{children}</div>
      </SidebarInset>
    </SidebarProvider>
  )
}