API REFERENCE

Collapse Icon

Functionality is the same as CollapseBtn but use IconButton instead of Button

Usage example

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

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

SidebarContent is a flex-item that will stretch the content and push CollapseIcon 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
              <CollapseIcon /> // will trigger primarySidebar
              <CollapseIcon sidebarId="2ndSidebar" /> // will trigger 2ndSidebar
            </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
      <CollapseIcon>
        {({ collapsed, anchor }) => {
          if (collapsed) return 'Expand'
          return 'Collapse'
        }}
      </CollapseIcon>
  • 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

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

Related components