API REFERENCE

Sidebar Trigger

A component for trigger open state of Temporary and Persistent of EdgeSidebar. This component will be hidden based on the configuration of EdgeSidebar, so you don’t need to assign any props to it except sidebarId that it need to know which sidebar should update.

Usage example

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

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

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 target to other sidebar.
      const App = () => {
        return (
          <Root scheme={scheme}>
            <DrawerSidebar sidebarId="primarySidebar">
              <SidebarTrigger /> // will trigger primarySidebar sidebar content
            </DrawerSidebar>
          </Root>
        );
      };
  • children
    • type : ReactNode | ({ open: boolean, anchor: ‘left’ | ‘right’ }) => ReactNode
    • description : you can provide children as a child to customise icon based on state & anchor
      <SidebarTrigger>
        {({ open, anchor }) => {
          if (!open) return 'Open'
          if (anchor === 'left') return '<-'
          if (anchor === 'right') return '->'
        }}
      </SidebarTrigger>
  • SvgIconProps
    • type : object
    • description : props that are sent to SvgIcon
  • other props refer to Material-UI IconButton

Styling

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

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

Related components