Material-UI抽屉持久状态

Question

我是Material-ui的新手并做出反应。我尝试做的是当用户点击AppBar上的汉堡菜单时，我的抽屉保持持久打开状态。我想要我的主要内容＆＃39;推动＆＃39;抽屉打开时向右，而不是放在其上的抽屉。我被困住了，不知道如何让它发挥作用。这是我的代码到目前为止。提前感谢任何提示或技巧！ ：）

的application.js

import React, {Component, PropTypes} from 'react'
import {connect} from 'react-redux'
import {ClassificationBanner} from './ClassificationBanner'
import TitleBar from './TitleBar'
import styles from './Application.css'
import injectTapEventPlugin from 'react-tap-event-plugin'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

injectTapEventPlugin();

class Application extends Component {

    render() {
        return (
            <MuiThemeProvider>
                <div className={styles.root}>
                    <ClassificationBanner />
                    <TitleBar />

                    {this.props.children}
                </div>
            </MuiThemeProvider>
        )
    }
}
Application.propTypes = {
    children: PropTypes.object.isRequired,
    bbox:     React.PropTypes.arrayOf(React.PropTypes.number),
};

export default Application

TitleBar.js

import React, {Component} from 'react'
import logo from '../../images/logo.1.png'
import AppBar from 'material-ui/AppBar'
import Drawer from 'material-ui/Drawer'
import Subheader from 'material-ui/Subheader'
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import MenuItem from 'material-ui/MenuItem'
import { Link, IndexLink } from 'react-router';
import css from './TitleBar.css'

class TitleBar extends Component {
    constructor(props){
        super(props);
        this.state = {drawerOpen:false};
    }

    getChildContext() {
        return {muiTheme: getMuiTheme(baseTheme)};
    }

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

    handleClose() { this.setState({drawerOpen: false}); }
    render() {

        const styles = {
            appBar: {
                backgroundColor: 'black',
                height: '70px',
                top: '25px'
            },
            img: {
                position: 'absolute',
                left: '50%',
                marginLeft: '-127px',
                marginTop: '10px',
                height: '50px'
            },
            drawer: {
                width: '200px',
                marginTop: '95px',
                backgroundColor: '#010101',
                marginLeft: '0px',
                padding: '0px'
            },
            mainMenu: {
                color: '#3e3f3f',
                display: 'inline-block',
                marginRight: '40px',
                fontSize: '20px',
                align: 'left',
            },
        };

        const img = <img style={styles.img} src={logo}/>

        return (
        <header className="header">
            <AppBar style={styles.appBar} title={img} onLeftIconButtonTouchTap={this.handleToggle.bind(this)} />
            <Drawer containerStyle={styles.drawer}
                    overlayStyle={styles.drawer}
                    docked={false}
                    open={this.state.drawerOpen}
                    onRequestChange={(open) => this.setState({open})}>
                <Subheader inset={false}><span style={{width:'100%'}}><div style={styles.mainMenu}>MAIN MENU</div><div style={{display:'inline-block'}}><i className="fa fa-long-arrow-left fa-lg" style={{color: '#4498c0'}} onTouchTap={this.handleClose.bind(this)} aria-hidden="true"></i></div></span></Subheader>
                <MenuItem className={css.menuItem} onTouchTap={this.handleClose.bind(this)}><IndexLink className={css.link} activeClassName={css.active} onlyActiveOnIndex={true} to="/exports"><i className="fa fa-book" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;DataPack Library</IndexLink></MenuItem>
                <MenuItem className={css.menuItem} onTouchTap={this.handleClose.bind(this)}><Link className={css.link} activeClassName={css.active} to="/create" ><i className="fa fa-plus-square" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;Create Datapack</Link></MenuItem>
                <MenuItem className={css.menuItem} onTouchTap={this.handleClose.bind(this)}><Link className={css.link} activeClassName={css.active} to="/about" ><i className="fa fa-info-circle" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;About EventKit</Link></MenuItem>
                <MenuItem className={css.menuItem} onTouchTap={this.handleClose.bind(this)}><Link className={css.link} activeClassName={css.active} to="/account" ><i className="fa fa-user" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;Account Settings</Link></MenuItem>
                <MenuItem className={css.menuItem} onTouchTap={this.handleClose.bind(this)}><Link className={css.link} activeClassName={css.active} to="/logout" ><i className="fa fa-sign-out" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;Log Out</Link></MenuItem>
            </Drawer>

        </header>
        )
    }
}

TitleBar.childContextTypes = {
    muiTheme: React.PropTypes.object.isRequired,
};
export default TitleBar

TitleBar.css

.menuItem > div > div{
    margin-left: 0px !important;
    padding: 0px !important;
}

.img {

    width: 205px;
    height: 40px;
}


/* =========================================================================
   Link
   ========================================================================= */

.link {
    position: relative;
    display: block;
    padding: 5px;
    text-align: left;
    text-decoration: none;
    color: #4498c0;
}
.link:visited {
    text-decoration:none;
}

.atHome .link {
    line-height: 150px;
}

.link:hover {
    background-color: #161e2e;
    text-decoration: none;
}
.link:active {
    text-decoration: none;
}
a:link {
    text-decoration: none;
}




/* Link: State
   ========================================================================= */

.active,
.active:hover {
    box-shadow: 0 2px rgba(0,0,0,.1);
    background-color: #161e2e;
    text-decoration: none;
}

.active:visited {
    text-decoration: none;
}

.active .icon {
    fill: #1675aa;
    filter: none;
    -webkit-filter: none;
    box-shadow: 0 2px rgba(0,0,0,.1);
    text-decoration: none;
}

Application.css

.root {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.body {
    font-family: 'Roboto', sans-serif;
}