content: import React from 'react';
  import PropTypes from 'prop-types';
  import FontIcon from 'react-md/lib/FontIcons';
  import ListItem from 'react-md/lib/Lists/ListItem';
  import { Link } from 'react-router-dom';
  import { connect } from 'react-redux';
  import { highLightActive } from '../store/actions';
  
  
  class NavItem extends React.Component {
  
    setActive() {
      this.props.highLightActive(this.props.id, this.props.primaryText);
    }
  
    render() {
      const navIcon = <FontIcon>{this.props.icon}</FontIcon>;
      let active = this.props.navBar.active === this.props.id;
  
      return (
        <Link to={this.props.route}>
          <ListItem 
            id={this.props.id}
            primaryText={this.props.primaryText} 
            leftIcon={navIcon}
            active={active}
            onClick={this.setActive.bind(this)} />
        </Link>
      );
    }
  }
  
  NavItem.propTypes = {
    id: PropTypes.string.isRequired,
    route: PropTypes.string.isRequired,
    primaryText: PropTypes.string.isRequired,
    icon: PropTypes.string.isRequired
  }
  
  const mapStateToProps = (state) => ({
    navBar: state.navBar
  })
  
  const mapDispatchToProps = (dispatch) => ({
    highLightActive: (active, title) => dispatch(highLightActive(active, title))
  });
  
  export default connect(mapStateToProps, mapDispatchToProps)(NavItem);