Material-ui: [Drawer] Container slides

[nguyenbathanh]

Is it possible to make container slide with Drawer and App Bar like this using material-ui?

[nguyenbathanh]

I figured out a trick to do this, see my example and code below:

export class MyComponent extends React.Component {
  constructor(props){
    super(props);
    this.state = {open: true};
    this.handleToggle = this.handleToggle.bind(this)
    this.handleClose = this.handleClose.bind(this)
  }

  componentWillMount(){   
  }

  handleToggle() {
    this.setState({open: !this.state.open});
  }

  handleClose() {
      this.setState({open: true});
  }

  componentWillReceiveProps(nextProps){
  }

  render(){
    return (
      <div>
         <MuiThemeProvider muiTheme={getMuiTheme()}>
         <div>
            <AppBar
            className={classnames('app-bar', {'expanded': this.state.open})}
            onLeftIconButtonTouchTap={this.handleToggle}
            title="How long have you been alive?"
            iconElementRight={<RightBar />}
            />
            <Drawer
            docked={true}
            open={this.state.open}
            onRequestChange={(open) => this.setState({open})}
            >
          <List>
            <Subheader>Nested List Items</Subheader>
            <ListItem primaryText="Sent mail" leftIcon={<ContentSend />} />
            <ListItem primaryText="Drafts" leftIcon={<ContentDrafts />} />
            <ListItem
              primaryText="Inbox"
              leftIcon={<ContentInbox />}
              initiallyOpen={true}
              primaryTogglesNestedList={true}
              nestedItems={[
                <ListItem
                  key={1}
                  primaryText="Starred"
                  leftIcon={<ActionGrade />}
                />,
                <ListItem
                  key={2}
                  primaryText="Sent Mail"
                  leftIcon={<ContentSend />}
                  disabled={true}
                  nestedItems={[
                    <ListItem key={1} primaryText="Drafts" leftIcon={<ContentDrafts />} />,
                  ]}
                />,
                <ListItem
                  key={3}
                  primaryText="Inbox"
                  leftIcon={<ContentInbox />}
                  open={this.state.open}
                  onNestedListToggle={this.handleNestedListToggle}
                  nestedItems={[
                    <ListItem key={1} primaryText="Drafts" leftIcon={<ContentDrafts />} />,
                  ]}
                />,
              ]}
            />
          </List>
        </Drawer>
          { this.props.isAuthenticated && <div className={classnames('app-content', {'expanded': this.state.open})}> { this.props.children } </div>}
        </div>
      </MuiThemeProvider>
      </div>
    );
  }
}

and the css style:

.app-bar{
  -moz-transition: left 218ms cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: left 218ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: left 218ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: left 218ms cubic-bezier(0.4, 0, 0.2, 1);
  left: 0;
  width: auto !important;
  right: 0 !important;
  position: fixed !important;
}
.app-content{
  -moz-transition: padding-left 218ms cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: padding-left 218ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: padding-left 218ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: padding-left 218ms cubic-bezier(0.4, 0, 0.2, 1);
  padding-right: 20px !important;
  padding-top: 64px !important;
}
.app-bar.expanded{
  left: 255px;
}

.app-content.expanded{
  padding-left: 255px;
}

[the-noob]

In case people stumble upon this, in version 1 you can supply a SlideProps to the Drawer