Material-ui: [Drawer] Permit Clipped

[dansiviter]

I'm unable to find an example of a clipped Drawer (see 'Example of a permanent, clipped drawer').

Ideally this would also permit open/close status.

If this is possible could it be documented on the Drawer page.

[mbrookes]

@dansiviter Use docked-{true} zDepth={0}.

[dansiviter]

I've tried that and it didn't work. I used:

<div>
  <Drawer docked={ true } zDepth={ 0 }>
    <AppBar showMenuIconButton={ false } title='Title' />
    <MenuItem>Menu Item 1</MenuItem>
    <MenuItem>Menu Item 2</MenuItem>
  </Drawer>
  <Toolbar>
    <ToolbarGroup firstChild={true}>
      <ToolbarTitle text="Unfortunately I'm Hidden under the drawer"/>
    </ToolbarGroup>
    <ToolbarGroup>
      <ToolbarSeparator />
      <IconMenu iconButtonElement={
        <IconButton touch={true}>
          <NavigationExpandMoreIcon />
        </IconButton>
      }>
        <MenuItem primaryText="About" />
      </IconMenu>
    </ToolbarGroup>
  </Toolbar>
  <div>
    <h1>Help, I'm also hidden under the drawer!</h1>
  </div>
</div>

Which has given:

As you can see there are lots of elements hidden by the drawer and there is no drop shaddow.

[mehrdad-shokri]

@dansiviter could you solve it?

[texonidas]

You can fix this fairly trivially by applying a left margin to the Toolbar and parent div of the rest of the content whenever the drawer is open.

The Material UI next docs have an example of this here that uses an inline style object to make the magic happen.