Advanced Manual

Controlling Sidebar

There are a lot of cases where we need to control EdgeSidebar behavior like collapse or open from other component’s action. This page will show you how do achieve that. It is pretty simple, same as normal react state and onChange that you already familiar with. Let’s do it.

Let’s reuse dashboard layout from basic tutorial as an example.

The new requirement comes in and we need to add 2 buttons in Content that can close and collapse EdgeSidebar. These button will show only when EdgeSidebar is open or not collapsed.

First, we need to change permanentConfig to persistentConfig so that our EdgeSidebar can be closed at breakpoint >= md

scheme.configureEdgeSidebar(builder => {
  builder
    .create('unique_id', { anchor: 'left' })
    .registerTemporaryConfig('xs', {
      anchor: 'left',
      width: 'auto',
    })
    .registerPersistentConfig('md', {      width: 256,      collapsible: true,      collapsedWidth: 64,      persistentBehavior: {        whatever_id: 'fit',        _others: 'none',      },    });});

Next, add some buttons to Content

import Container from '@material-ui/core/Container';import Button from '@material-ui/core/Button';import Box from '@material-ui/core/Box';// ...other import

// ...scheme configuration section

const App = () => {
  return (
    <Root scheme={scheme}>
      {({ state: { sidebar } }) => (
        <>
          <CssBaseline />
          <Header>
            <Toolbar>
              <SidebarTrigger sidebarId="unique_id" />
              <HeaderMockUp />
            </Toolbar>
          </Header>
          <DrawerSidebar sidebarId="unique_id">
            <SidebarContent>
              <NavHeaderMockUp collapsed={sidebar.unique_id.collapsed} />
              <NavContentMockUp />
            </SidebarContent>
            <CollapseBtn />
          </DrawerSidebar>
          <Content>
            <Container maxWidth="md">
              <Box pt={2}>                <Button variant="contained" color="primary">                  Collapse                </Button>                <Button variant="contained">Close</Button>              </Box>
            </Container>
            <ContentMockUp />
          </Content>
          <Footer>
            <FooterMockUp />
          </Footer>
        </>
      )}
    </Root>
  );
};

gif

At this point we will hide the buttons if Sidebar open or collapse by getting sidebar state from Root.

const App = () => {
  return (
    <Root scheme={scheme}>
      {({ state: { sidebar } }) => (
        <>
          ...
          <Content>
            <Container maxWidth="md">
              <Box pt={2}>
                {sidebar.unique_id.open && !sidebar.unique_id.collapsed && (                  <Button variant="contained" color="primary">                    Collapse                  </Button>                )}                {sidebar.unique_id.open && (                  <Button variant="contained">Close</Button>                )}              </Box>
            </Container>
            <ContentMockUp />
          </Content>
          ...
        </>
      )}
    </Root>
  );
};

Note: we use sidebar.unique_id because we define sidebar id as unique_id. you can use your own id(string).

Last step, use setOpen and setCollapsed (with ed) to update sidebar state.

const App = () => {
  return (
    <Root scheme={scheme}>
      {({ state: { sidebar }, setOpen, setCollapsed }) => (        <>
          ...
          <Content>
            <Container maxWidth="md">
              <Box pt={2}>
                {sidebar.unique_id.open && !sidebar.unique_id.collapsed && (                  <Button                    variant="contained"                    color="primary"                    onClick={() => setCollapsed('unique_id', true)}                  >                    Collapse                  </Button>                )}                {sidebar.unique_id.open && (                  <Button                    variant="contained"                    onClick={() => setOpen('unique_id', false)}                  >                    Close                  </Button>                )}              </Box>
            </Container>
            <ContentMockUp />
          </Content>
          ...
        </>
      )}
    </Root>
  );
};

setOpen and setCollapsed are function that receive 2 arguments.

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