Layout

A compound component providing the structure for a responsive page layout with top navigation, collapsible sidebar, and main content area.

import { Layout, T } from '@kaynora/ui'

export default function () {
  return (
    <Layout>
      <Layout.TopNav><T>Navigation</T></Layout.TopNav>
      <Layout.SideNav><T>Sidebar</T></Layout.SideNav>
      <Layout.Content>
        <Layout.Section><T>Content</T></Layout.Section>
      </Layout.Content>
    </Layout>
  )
}

<Layout />

ReactElement | ReactElement[]

{
  root: HTMLDivElementProps
}

<Layout.TopNav />

ReactElement | ReactElement[]

{
  root: HTMLDivElementProps
  content: HTMLElementProps
}

<Layout.SideNav />

ReactElement | ReactElement[]

{
  root: HTMLDivElementProps
  button: ButtonProps
  content: HTMLElementProps
}

<Layout.Content />

ReactElement | ReactElement[]

{
  root: HTMLElementProps
}

<Layout.Section />

ReactElement | ReactElement[]

{
  root: HTMLElementProps
}