API REFERENCE

Collapse Button

For setting collapsed state of Permanent or Persistent EdgeSidebar. This component will be hidden based on sidebar configuration same as SidebarTrigger

Usage example

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

const DrawerSiderbar = getDrawerSidebar(styled)
const SidebarTrigger = getSidebarTrigger(styled)
const CollapseBtn = getCollapseBtn(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}>
      <CollapseBtn sidebarId="primarySidebar" />
      <DrawerSidebar sidebarId="primarySidebar">
        <SidebarContent>
          sidebar content
        </SidebarContent>
        <CollapseBtn />
      </DrawerSidebar>
    </Root>
  )
}

SidebarContent is a flex-item that will stretch the content and push CollapseBtn to the bottom of sidebar

Props

  • sidebarId
    • type : string
    • required : yes
    • description : sidebarId that will be updated. If this component renders inside of EdgeSidebar you don’t need to specify sidebarId unless you want to update other sidebar.
      const App = () => {
        return (
          <Root scheme={scheme}>
            <DrawerSidebar sidebarId="primarySidebar">
              sidebar content
              <CollapseBtn /> // will trigger primarySidebar
            </DrawerSidebar>
          </Root>
        );
      };
  • children
    • type : ReactNode | ({ collapsed: boolean, anchor: ‘left’ | ‘right’ }) => ReactNode
    • description : you can provide children as a child to customise icon based on state & anchor
      <CollapseBtn>
        {({ collapsed, anchor }) => {
          if (collapsed) return 'Expand'
          return 'Collapse'
        }}
      </CollapseBtn>
  • SvgIconProps
    • type : object
    • description : props that are sent to SvgIcon
  • other props refer to Material-UI Button

Styling

SidebarTrigger use Button that contains SvgIcon insider. All of the props that you provide will go to Button except SvgIconProps will send to SvgIcon

<CollapseBtn
  classes={{ root: 'custom-trigger' }}
  SvgIconProps={{
    className: 'custom-icon',
  }}
/>

Related components