text: import React, { PureComponent } from 'react'
  import PropTypes from 'prop-types'
  import classNames from 'classnames'
  import { withStyles } from '@material-ui/core/styles'
  import Divider from '@material-ui/core/Divider'
  import SwipeableDrawer from '@material-ui/core/SwipeableDrawer'
  import List from '@material-ui/core/List'
  import ListItem from '@material-ui/core/ListItem'
  import ListItemIcon from '@material-ui/core/ListItemIcon'
  import ListItemText from '@material-ui/core/ListItemText'
  import HomeIcon from '@material-ui/icons/Home'
  import { Link } from 'react-router-dom'
  import SettingsIcon from '@material-ui/icons/Settings'
  import '../../node_modules/gemini-scrollbar/gemini-scrollbar.css'
  import GeminiScrollbar from 'react-gemini-scrollbar'
  import {
    ReportOff,
    Report,
    DesktopMac,
    Mouse,
    TrendingUp,
    Create,
    Save,
    FileCopy,
    Storage,
    Visibility,
    Security,
    People,
    NetworkWifi,
    Router,
    Settings,
    Public,
    ThumbUp,
    Search,
    Http,
    Cloud
  } from '@material-ui/icons/'
  const styles = theme => ({
    iconColor: {
      color: theme.palette.primary.icon
    },
    categoryHeader: {
      paddingTop: 16,
      paddingBottom: 16
    },
    categoryHeaderPrimary: {
      // color: theme.palette.common.white
    },
    item: {
      paddingTop: 4,
      paddingBottom: 4,
  
      color: theme.palette.primary.navText
    },
    itemCategory: {
      boxShadow: '0 -1px 0 #404854 inset',
      paddingTop: 16,
      paddingBottom: 16
    },
    firebase: {
      fontFamily: theme.typography.fontFamily,
      color: theme.palette.common.white
    },
    itemActionable: {
      '&:hover': {
        backgroundColor: 'rgba(150, 150, 200, 0.08)'
      }
    },
    itemActiveItem: {
      color: '#4fc3f7'
    },
    itemPrimary: {
      color: 'inherit',
      fontSize: theme.typography.fontSize,
      '&$textDense': {
        fontSize: theme.typography.fontSize
      }
    },
    textDense: {
      fontSize: theme.typography.fontSize
    },
    divider: {
      marginTop: theme.spacing.unit * 2
    },
    whiteBackground: {
      backgroundColor: '#fff !important',
      height: '6.05em'
    },
    img: {
      padding: 0,
      height: 3
    }
  })
  
  class Navigator extends PureComponent {
    static propTypes = {}
    static defaultProps = {}
    render () {
      const { classes, ...other } = this.props
      const url = window.location.pathname
      const currentUrl = url.substr(url.lastIndexOf('/') + 1)
      const categories = [
        {
          id: 'Monitoring',
          children: [
            {
              id: 'NB Disable',
              icon: <ReportOff />,
              route: '/Monitoring/NbDisable',
              active: currentUrl.toLowerCase() === 'nbdisable' && true
            }
          ]
        },
        {
          id: 'Reports',
          children: [
            {
              id: 'CI Orphans',
              icon: <Report />,
              route: '/Reports/CIOrphans',
              active:
                currentUrl.toLowerCase() === 'CIOrphans'.toLowerCase() && true
            }
          ]
        }
      ]
  
      return (
        <SwipeableDrawer style={{ zIndex: 2000000 }} {...other}>
          <GeminiScrollbar autoshow>
            <List disablePadding>
              <ListItem
                button
                key='img'
                dense
                component={Link}
                to='/'
                className={classNames(
                  classes.firebase,
                  classes.item,
                  classes.itemCategory,
                  classes.whiteBackground
                )}
              >
                <div>
                  <img
                    alt='Nb'
                    src={require('../public/images/myneuberger_logo.svg')}
                    width='100%'
                  />{' '}
                  <img
                    className={classes.img}
                    alt='Logo'
                    src={require('../public/images/linePic.png')}
                    width='100%'
                  />
                </div>
              </ListItem>
              <ListItem
                key='home'
                button
                dense
                component={Link}
                to='/'
                className={classNames(classes.item, classes.itemCategory)}
              >
                <ListItemIcon className={classes.iconColor}>
                  <HomeIcon />
                </ListItemIcon>
                <ListItemText
                  className={classNames(
                    classes.item,
                    classes.itemActionable,
                    currentUrl === '' && classes.itemActiveItem
                  )}
                  classes={{
                    primary: classes.itemPrimary,
                    textDense: classes.textDense
                  }}
                >
                  Home
                </ListItemText>
              </ListItem>
              {categories.map(({ id, children }) => (
                <React.Fragment key={id}>
                  <ListItem
                    className={classNames(
                      classes.item,
                      classes.itemActionable,
                      classes.itemActiveItem
                    )}
                  >
                    <ListItemText
                      classes={{
                        primary: classes.categoryHeaderPrimary
                      }}
                    >
                      {id}
                    </ListItemText>
                  </ListItem>
                  {children.map(({ id: childId, icon, active, route }) => (
                    <ListItem
                      button
                      dense
                      component={Link}
                      to={route}
                      key={childId}
                      className={classNames(classes.item, classes.itemActionable)}
                    >
                      <ListItemIcon className={classes.iconColor}>
                        {icon}
                      </ListItemIcon>
                      <ListItemText
                        className={active && classes.itemActiveItem}
                        classes={{
                          primary: classes.itemPrimary,
                          textDense: classes.textDense
                        }}
                      >
                        {childId}
                      </ListItemText>
                    </ListItem>
                  ))}
                  <Divider className={classes.divider} />
                </React.Fragment>
              ))}
            </List>
          </GeminiScrollbar>
        </SwipeableDrawer>
      )
    }
  }
  
  export default withStyles(styles)(Navigator)
  