Sidebar

Layout Component

import { Sidebar } from 'maker-ui'

The Sidebar component is a grid column that sits alongside the <Main> content wrapper for sidebar layouts.

Props#

The Sidebar doesn't have any special props, it's just a <div role="complementary" /> wrapper that gives you access to the css prop.

Prop	Description
css	Type object Styles from the `css` prop will be applied to the Sidebar.

Maker UI Options#

Your options configuration has a sidebar object with the following properties:

Option	Property
errorBoundary	Type boolean When true, this will wrap the inner contents of the Sidebar in an Error Boundary that you can customize with `options.errors`. Defaultfalse
width	Type string \| number \| (string \| number)[] In single sidebar layouts, this is the width of the Sidebar. In multiple sidebar layouts, this is the width of the first (left-hand) Sidebar column. Can be a responsive array. Default300
width_2	Type string \| number \| (string \| number)[] In multiple sidebar layouts, this is the width of the second (right-hand) Sidebar column. Can be a responsive array. Default200

Usage#

The Sidebar can be used in 3 possible layouts. It is always nested under <Content> and alongside <Main>:

import { Layout, Header, Content, Main, Sidebar } from 'maker-ui'

// Render a Sidebar on the right

export const Layout1 = ({ children }) => (
  <Layout>
    <Header />
    <Content>
      <Main>{children}</Main>
      <Sidebar>custom content</Sidebar>
    </Content>
  </Layout>
)

// Render a Sidebar on the left

export const Layout2 = ({ children }) => (
  <Layout>
    <Header />
    <Content>
      <Sidebar>custom content</Sidebar>
      <Main>{children}</Main>
    </Content>
  </Layout>
)

// Render Sidebars on both sides of the main content.

export const Layout3 = ({ children }) => (
  <Layout>
    <Header />
    <Content>
      <Sidebar>custom content</Sidebar>
      <Main>{children}</Main>
      <Sidebar>custom content</Sidebar>
    </Content>
  </Layout>
)

Contents