Layout

Sidebar

SidebarLayout

The SidebarLayout component provides a Layout for the whole page. It divides the page into two sections, one smaller one on the left side and a larger one on the right side. The left column acts as the sidebar and has a fixed position. The Layout is fully responsive and on mobile breakpoints a CircleButton is displayed to toggle the sidebar.

The SidebarLayout is perfect for admin dashboards or documentation pages. In fact, the page you are currently on uses the SidebarLayout 😉.

It takes two arguments as props:

• sidebarItems (element) is a single component that contains the content that will be displayed in the sidebar
• children (element) is a single component that will be displayed in the content section

Example:

Your are looking at a SidebarLayout right now as you browse through the documentation. Thank you for that, by the way! The code could look something like this:

<SidebarLayout
sidebarItems={<div>The sidebar content goes here!</div>}
>
{<div>The main content goes here!</div>}
</SidebarLayout

SidebarPanel

This is a component that lets you separate content visually within a sidebar. You can see that quite nicely on the page you are currently on. In the sidebar, you have different sections that have a larger heading, e.g., "General", and links beneath the heading. Together these make up a SidebarPanel. It takes two arguments as props:

• title (string) is the title at the top
• children (any) is whatever is displayed beneath the title.

Example: Take a look at the sidebar to the left (or open it, if you're on a mobile device). A sidebar Panel might be constructed like this:

<SidebarPanel title="General" >
    <>
        <Element />
        <Element />
        <Element />
    </>
</SidebarPanel>