Layout Component Examples

The Layout component is a versatile container that can be configured for various use cases. Below are examples of common layout patterns implemented with SappsUI components.

Login Layout

A simple layout without navbar or sidebar, perfect for authentication pages.

Implementation

<Layout>
  <LayoutBody>
    <LayoutMain>
      <!-- Page content -->
    </LayoutMain>
  </LayoutBody>
</Layout>

Landing Page Layout

A layout with only a navbar, commonly used for landing pages and marketing sites.

Implementation

<Layout hNavbar={64} navbarInset>
  <Navbar>
    <NavbarBody>
      <!-- Navbar content -->
    </NavbarBody>
  </Navbar>
  <LayoutBody>
    <LayoutMain>
      <!-- Page content -->
    </LayoutMain>
  </LayoutBody>
</Layout>

Dashboard Layout

A complete layout with navbar and sidebar, ideal for dashboards and admin panels. The sidebar is responsive and becomes a drawer on mobile devices based on the breakpoint.

Implementation

<Layout hNavbar={64} wlSidebar={200} navbarInset>
  <Navbar>
    <NavbarBody>
      <!-- Navbar content with menu toggle for mobile -->
    </NavbarBody>
  </Navbar>
  <LayoutBody>
    <Sidebar breakpoint="md">
      <SidebarBody>
        <!-- Sidebar content -->
      </SidebarBody>
    </Sidebar>
    <LayoutMain>
      <!-- Main content -->
    </LayoutMain>
  </LayoutBody>
</Layout>

Additional Layout Configurations

The Layout component supports various configurations through props:

Prop	Description	Example
`hNavbar`	Height of the navbar in pixels	`hNavbar=64`
`hDock`	Height of the dock in pixels	`hDock=56`
`wlSidebar`	Width of the left sidebar in pixels	`wlSidebar=250`
`wrSidebar`	Width of the right sidebar in pixels	`wrSidebar=250`
`navbarInset`	Whether to inset the layout body below the navbar	`navbarInset=true`
`fullOnScroll`	Whether to hide the navbar when scrolling down	`fullOnScroll=true`

Responsive Behavior

The sidebar component has a breakpoint prop that determines when it transforms into a drawer on smaller screens. Common breakpoint values are: "sm", "md", "lg", "xl", "2xl".

Resize your browser window to see how the dashboard example above changes between sidebar and drawer modes.