API REFERENCE

Drawer Sidebar

Drawer sidebar will look for edge sidebar config and render based on them.

Usage example

import styled from 'styled-components'
import Layout, { Root, getDrawerSidebar } from '@mui-treasury/layout';

const DrawerSidebar = getDrawerSidebar(styled)

cosnt scheme = Layout()

scheme.configureEdgeSidebar((builder) => {
  builder
    .create("primarySidebar", { anchor: "left" })
    .registerPersistentConfig("md", {
      width: 256,
      collapsible: false,
      persistentBehavior: "fit",
    });
});

const App = () => {
  return (
    <Root scheme={scheme}>
      <DrawerSidebar sidebarId="primarySidebar">
        sidebar content
      </DrawerSidebar>
    </Root>
  )
}

You can render DrawerSidebar at any order below Root, no need to concern about anchor left or right.

Props

  • sidebarId
    • type : string
    • required : yes
    • description : id that will match sidebar config
  • other props excluding anchor and variant is passed to Drawer

Styling

Because drawer sidebar use Drawer from material-ui, please read official doc


Related components