content: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  
  import * as colors from '../../constants/colorPalette';
  
  import NavBar from './NavBar';
  
  import Dashboard from 'material-ui/svg-icons/action/dashboard';
  import Face from 'material-ui/svg-icons/action/face';
  import Business from 'material-ui/svg-icons/communication/business';
  
  import './nav.scss';
  
  class Nav extends Component {
    render() {
  
      const { drawerState, drawerActions, auth, location, history } = this.props;
      const styles = {
        container: {
          display: 'flex',
          flexDirection: 'column',
          flex: 1
        },
        navContainer: {
          display: 'flex',
          flex: 1
        },
        navDrawer: {
          backgroundColor: colors.accent4,
          width: drawerState.open ? 240 : 60,
          transition: 'width 0.2s',
          overflow: 'hidden',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-start'
        },
        appShellContainer: {
          display: 'flex',
          flexDirection: 'column',
          flex: 1,
          padding: 20
        },
        navItemContainer: {
          display: 'flex',
          alignItems: 'center',
          flexWrap: 'none',
          height: 60,
          paddingLeft: 17,
          width: '100%',
          borderBottom: '1px solid #ccc',
          cursor: 'pointer'
        },
        navItemIcon: {
          display: 'flex'
        },
        navItemLabel: {
          whiteSpace: 'nowrap',
          marginLeft: 20,
          userSelect: 'none'
        },
        appShell: {
          flex: 1
        },
        footer: {
          fontSize: 12,
          alignSelf: 'flex-end',
          display: 'flex'
        }
      };
  
      const page1 = { path: '/', selected: location.pathname == '/' ? 'selected' : '' };
      const page2 = { path: '/page2', selected: location.pathname == '/page2' ? 'selected' : '' };
      const page3 = { path: '/page3', selected: location.pathname == '/page3' ? 'selected' : '' };
  
      return (
        <div style={styles.container}>
          <NavBar drawerActions={drawerActions} drawerState={drawerState} auth={auth} history={history} />
  
          <div style={styles.navContainer}>
            <div style={styles.navDrawer}>
  
              <div className={`nav-item ${page1.selected}`} style={styles.navItemContainer} onClick={() => { history.push(page1.path); }}>
                <div style={styles.navItemIcon}><Dashboard /></div>
                <div style={styles.navItemLabel}>
                  Menu Item 1
                </div>
              </div>
  
              <div className={`nav-item ${page2.selected}`} style={styles.navItemContainer} onClick={() => { history.push(page2.path); }}>
                <div style={styles.navItemIcon}><Business /></div>
                <div style={styles.navItemLabel}>
                  Menu Item 2
                </div>
              </div>
  
              <div className={`nav-item ${page3.selected}`} style={styles.navItemContainer} onClick={() => { history.push(page3.path); }}>
                <div style={styles.navItemIcon}><Face /></div>
                <div style={styles.navItemLabel}>
                  Menu Item 3
                </div>
              </div>
  
            </div>
  
            <div style={styles.appShellContainer}>
              <div style={styles.appShell}>{this.props.children}</div>
              <div style={styles.footer}>&copy; React Template V1.1 2018</div>
            </div>
          </div>
  
        </div>
      );
    }
  }
  
  Nav.propTypes = {
    drawerState: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired,
  
    drawerActions: PropTypes.object.isRequired,
  
    children: PropTypes.element,
    auth: PropTypes.object.isRequired
  };
  
  export default Nav;
  