Advanced

Custom Trigger

Triggers are SidebarTrigger and CollapseBtn. You can create your own Triggers by using some of the hooks from Layout lib. Here is an example,

image

I want to create a CollapseBtn that looks like above image, I will call it CustomCollapse

First, import useSidebarCta from layout and create StyledComponent that accept styles as a function. You will get hiddenStyles after calling useSidebarCta. If you log hiddenStyles, you will see that it is an object that contains css display property for each breakpoint, it is calculated from layout configuration. We need to use it to only render this component in some breakpoints that has collapsible sidebar.

// inside CustomCollapse.js
import styled from 'styled-components';
import { useSidebarCollapse } from '@mui-treasury/layout';

const StyledButton = styled('button')(({ styles }) => ({
  ...styles,
}));

const CustomCollapse = ({ sidebarId }) => {
  const { hiddenStyles } = useSidebarCollapse(sidebarId, 'CustomCollapse');
  return <StyledButton styles={hiddenStyles} />;
};

export default CustomCollapse;

If you render this component under Root, you will see that it appears only in some breakpoint that contains collapsible sidebar.

Next, use setCollapsed from useSidebarCta and add to onClick handler

type setCollapsed = (sidebarId: string, value: boolean) => void

If you want to collapse Sidebar, call setCollapsed('target_sidebar_id', true).

// inside CustomCollapse.js
import styled from 'styled-components';
import { useSidebarCollapse } from '@mui-treasury/layout';

const StyledButton = styled('button')(({ styles }) => ({
  ...styles,
}));

const CustomCollapse = ({ sidebarId }) => {
  const { id, hiddenStyles, setCollapsed, state } = useSidebarCollapse(
    sidebarId,
    'CustomCollapse'
  );
  // hook will get the state of sidebarId you provided, not state of every sidebar
  return (
    <StyledButton
      styles={hiddenStyles}
      onClick={() => setCollapsed(id, !state.collapsed)}
    >
      {state.collapsed ? 'show' : 'hide'}
    </StyledButton>
  );
};

export default CustomCollapse;

Create custom SidebarTrigger is the same as above example but you might want to use setOpen from useSidebarTrigger instead of setCollapsed