import React from 'react'
import MuiDrawer from 'material-ui/Drawer'
import MenuItem from 'material-ui/MenuItem'
import muiThemeable from 'material-ui/styles/muiThemeable';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as drawerActions from './dux'

class Drawer extends React.Component {
  render() {
    const theme = this.props.muiTheme
    const topBarStyle = {
     backgroundColor: theme.palette.primary1Color,
     color: theme.appBar.textColor
     
    }
    return (
      <div>
        <MuiDrawer open={this.props.drawer.isOpen}>
          <MenuItem
            primaryText='Apps'
            onTouchTap={this.props.actions.closeDrawer}
            innerDivStyle={topBarStyle}
          />
          <MenuItem primaryText='Counter' />
          <MenuItem primaryText='Todo List' />
        </MuiDrawer>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    drawer: state.drawer
  }
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(drawerActions, dispatch)
  }
}

export default muiThemeable()(connect(mapStateToProps, mapDispatchToProps)(Drawer))
import React from 'react'
import MuiDrawer from 'material-ui/Drawer'
import MenuItem from 'material-ui/MenuItem'
import { Link } from 'react-router-dom'
import muiThemeable from 'material-ui/styles/muiThemeable';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as drawerActions from './dux'

class Drawer extends React.Component {
  toggle(open, reason) {
    console.log('Toggling to ', open, ' because ', reason)
    if (open) {
      this.props.actions.openDrawer()
    } else {
      this.props.actions.closeDrawer()
    }
  }

  render() {
    const theme = this.props.muiTheme
    const topBarStyle = {
     backgroundColor: theme.palette.primary1Color,
     color: theme.appBar.textColor
    }
    return (
      <div>
        <MuiDrawer
          open={this.props.drawer.isOpen}
          docked={false}
          onRequestChange={this.toggle.bind(this)}
        >
          <MenuItem
            primaryText='Apps'
            onTouchTap={this.props.actions.closeDrawer}
            innerDivStyle={topBarStyle}
          />
          <MenuItem
            primaryText='Counter'
            containerElement={<Link to='/counter' />}
            onTouchTap={this.props.actions.closeDrawer}
          />
          <MenuItem
            primaryText='Todo List'
            containerElement={<Link to='/todo' />}
            onTouchTap={this.props.actions.closeDrawer}
          />
        </MuiDrawer>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    drawer: state.drawer
  }
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(drawerActions, dispatch)
  }
}

export default muiThemeable()(connect(mapStateToProps, mapDispatchToProps)(Drawer))
Make the drawer behave like a mobile drawer Close when you click away. Grey out the background when the menu is up.