// 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)
))