content: import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { signOut } from '../actions/auth_actions';
  import { AppBar, Drawer, MenuItem } from 'material-ui';
  import { browserHistory } from 'react-router';
  
  class Header extends Component {
    constructor(props) {
     super(props);
     this.state = {open: false};
  
     this.handleToggle = this.handleToggle.bind(this);
     this.handleClose = this.handleClose.bind(this);
    }
  
    handleToggle() {
     this.setState({open: !this.state.open});
    }
  
    handleClose() {
      this.setState({open: false});
    }
  
    goToDashbaord() {
      browserHistory.push('/');
    }
  
    handleMenuSelect(onSelect) {
      this.handleClose();
      onSelect();
    }
  
    render () {
      if(this.props.isAuthenticated) {
        return (
          <div>
            <div className="top-nav">
              <AppBar style={{backgroundColor: "transparent"}} onLeftIconButtonTouchTap={this.handleToggle}/>
            </div>
            <Drawer
              docked={false}
              width={200}
              open={this.state.open}
              onRequestChange={(open) => this.setState({open})}
              className="drawer">
              <MenuItem onTouchTap={() => this.handleMenuSelect(this.goToDashbaord)}>Dashboard</MenuItem>
              <MenuItem onTouchTap={() => this.handleMenuSelect(this.props.signOut)}>Sign Out</MenuItem>
            </Drawer>
          </div>
        )
      } else {
        return (
          <div></div>
        )
      }
    }
  }
  
  function mapStateToProps(state) {
    return { isAuthenticated: state.auth.isAuthenticated }
  }
  
  export default connect(mapStateToProps, { signOut })(Header);
  