Material-UI drawer persistent state - reactjs

Question

I'm new to Material-ui and react. What I'm trying to do is have my drawer stay in a persistent open state when the user clicks the hamburger menu on the AppBar. I want my main content 'pushed' to the right when the drawer opens, not the drawer laying on top of it. I'm stuck and don't know how to get this to work. Here's my code thus far. Thanks in advance for any tips or tricks! :)
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> 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> 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> 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> 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> 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;
}