content: import React from 'react';
  import {Link, IndexLink} from 'react-router';
  
  // icons
  // import IconDashboard from 'react-icons/lib/md/dashboard';
  // import FaBellO from 'react-icons/lib/fa/bell-o';
  // import FaCubes from 'react-icons/lib/fa/cubes';
  // import FaClipboard from 'react-icons/lib/fa/clipboard';
  import ScrollArea from 'react-scrollbar';
  
  import './style.scss';
  
  const NavHead = (props) => (
      <header className="nav-head">
          <Link to="/">
              <img alt="Logo" src="/images/logo.png" />
          </Link>
          <div className={`toggle-dot ${props.mini ? 'active': ''}`} onClick={props.toggleNav}></div>
      </header>
  );
  
  class NavList extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              selected: 0
          }
      }
      handleClick = (index, e) => {
          let c = e.currentTarget.className;
          e.preventDefault();
          e.stopPropagation();
          this.setState({
              selected: (c.indexOf('selected') >= 0) ? '' : index
          })
      }
      handleOpen = (index, e) => {
          e.stopPropagation();
          this.setState({
              selected: index
          })
      }
  
      render() {
          return <ScrollArea className="nav-list-container" horizontal={false} verticalScrollbarStyle={{width: '4px', marginLeft: '10px'}}>
              <ul className="list-unstyled nav-list clearfix">
                  <li onClick={this.handleClick.bind(this, 0)} className={(this.state.selected === 0) ? 'selected': ''}>
                      <IndexLink to="/" >
                          {/*<IconDashboard size="18" />*/}
                          <span className="name">Dashboard</span>
                      </IndexLink>
                  </li>
                   <li onClick={this.handleClick.bind(this, 1)} className={(this.state.selected === 1) ? 'selected': ''}>
                      <IndexLink to="/">
                          {/*<FaBellO size="18" />*/}
                          <span className="name">Alerts</span>
                      </IndexLink>
                  </li>
                  <li onClick={this.handleClick.bind(this, 2)} className={(this.state.selected === 2) ? 'selected': ''}>
                      <IndexLink to="/">
                          {/*<FaCubes size="18" />*/}
                          <span className="name">src</span>
                      </IndexLink>
                  </li>
                  <li onClick={this.handleClick.bind(this, 3)} className={(this.state.selected === 3) ? 'selected': ''}>
                      <IndexLink to="/">
                          {/*<FaClipboard size="18" />*/}
                          <span className="name">Reports</span>
                      </IndexLink>
                  </li>
                  <li onClick={this.handleClick.bind(this, 4)} className={(this.state.selected === 4) ? 'selected': ''}>
                      <IndexLink to="/devices">
                          {/*<FaClipboard size="18" />*/}
                          <span className="name">Device</span>
                      </IndexLink>
                  </li>
              </ul>
              {/* end scroll-area */}
          </ScrollArea>
      }
  }
  
  export default (props) => (
      <nav className={`site-nav ${props.mini ? 'mini' : ''}`} role="navigation">
          <NavHead {...props}/>
          <NavList/>
  
      </nav>
  );
  