{"size": 1403, "ext": "js", "max_stars_repo_path": "src/components/Menu/Items.js", "max_stars_repo_name": "ChrisWeekly/react-mobx-materialui-starter", "max_stars_repo_stars_event_min_datetime": "2018-06-28T23:32:14.000Z", "max_stars_repo_stars_event_max_datetime": "2020-07-31T02:31:29.000Z", "max_issues_repo_path": "src/components/Menu/Items.js", "max_issues_repo_name": "ChrisWeekly/react-mobx-materialui-starter", "max_issues_repo_issues_event_min_datetime": "2018-07-31T12:27:03.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T13:04:04.000Z", "max_forks_repo_path": "src/components/Menu/Items.js", "max_forks_repo_name": "ChrisWeekly/react-mobx-materialui-starter", "max_forks_repo_forks_event_min_datetime": "2018-08-01T10:55:12.000Z", "max_forks_repo_forks_event_max_datetime": "2019-09-04T16:47:12.000Z"}
{"max_stars_count": 7, "max_issues_count": 8, "max_forks_count": 4, "avg_line_length": 25.9814814815, "max_line_length": 68, "alphanum_fraction": 0.6200997862}
import React from 'react';
import PropTypes from 'prop-types';
import { inject, observer } from 'mobx-react';
import { withStyles } from '@material-ui/core/styles';
import Divider from '@material-ui/core/Divider';
import List from '@material-ui/core/List';
import Gesture from '@material-ui/icons/Gesture';
import Inbox from '@material-ui/icons/Inbox';

import { colors } from '../../utils/theme'
import MenuItem from './Item';

const styles = theme => ({
  list: {
    width: '100%',
    paddingBottom: `${theme.spacing.unit * 8}px`,
  },
  divider: {
    margin: `${theme.spacing.unit}px 0`,
  },
});

const StyledList = withStyles(styles)(({ classes, ...rest }) => (
  <List className={classes.list} {...rest} />
));

const StyledDivider = withStyles(styles)(({ classes, ...rest }) => (
  <Divider className={classes.divider} {...rest} />
));

const Items = ({ router }) => (
  <StyledList>
    <MenuItem
      onClick={() => router.goTo('/stuff')}
      selected={router.pathname === '/stuff'}
      icon={<Inbox style={{color: colors.icons.stuff}} />}
      title={'Stuff'}
    />
    <StyledDivider />
    <MenuItem
      onClick={() => router.goTo('/other')}
      selected={router.pathname === '/other'}
      icon={<Gesture />}
      title={'More stuff'}
    />
  </StyledList>
);

Items.propTypes = {
  router: PropTypes.object.isRequired,
}

export default inject('router')(observer(Items));
