text: // React Imports
  import React from 'react'
  import PropTypes from 'prop-types'
  
  import { withStyles } from '@material-ui/core/styles'
  import classNames from 'classnames'
  import ListItem from '@material-ui/core/ListItem'
  import BookmarkIcon from '@material-ui/icons/Bookmark'
  
  import { hot } from 'react-hot-loader/root'
  import { wrapper } from "reativo"
  
  const styles = theme => ({
    //css buttons
    button: {
      width: '100%',
      maxWidth: 360,
      backgroundColor: theme.palette.background.paper,
      borderRadius: '0 12px 12px 0',
      transition: 'margin .15s cubic-bezier(0.4,0.0,0.2,1),padding .15s cubic-bezier(0.4,0.0,0.2,1)',
      padding: '0 10px 0 26px',
  
      '&:hover': {
        cursor: 'pointer',
      },
    //css on specifc divs
    },
    divRoot: {
      padding: '0 8px 0 26px',
      alignItems: 'center',
      display: 'flex',
      height: '24px',
      position: 'relative'
    },
    divIcon: {
      borderColor: '#000',
      alignItems: 'center',
      display: 'flex',
      flexShrink: '0',
      height: '20px',
      justifyContent: 'flex-start',
      marginRight: '18px',
      width: '20px',
      color: '#767676',
    },
  });
  
  
  const menuItems = [
    {icon: BookmarkIcon, text: "Tasks", url: "/tasks"},
  ]
  
  function SimpleList({classes, drawer}) {
    return (
      <div id="menu-list" data-turbolinks-permanent>
        {menuItems.map((item, index) => (
          <ListItem key={index} button className={classNames(classes.button,classes.divRoot)} onClick={() => Turbolinks.visit(item.url)}>
            <item.icon className={classes.divIcon}/>
              {drawer.open ? item.text : ''}
          </ListItem>
        ))} 
      </div>
    );
  }
  
  SimpleList.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  const mapStateToProps = state => {
    const { drawer } = state
    return ({
      drawer
    })
  }
  
  export default hot(withStyles(styles)(
    wrapper(SimpleList, mapStateToProps)
  ))
  