1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import DraftsIcon from '@material-ui/icons/Drafts';
import SendIcon from '@material-ui/icons/Send';
import { MenuList, MenuItem, Paper, ListItemIcon, ListItemText } from '@material-ui/core';
const styles = theme => ({
menu: {
maxWidth: 400,
margin: '20 auto'
},
menuItem: {
'&:focus': {
backgroundColor: theme.palette.primary.main,
'& $primary, & $icon': {
color: theme.palette.common.white,
},
},
},
primary: {},
icon: {},
});
function StyledMenu(props) {
const { classes } = props;
return (
<Paper className={classes.menu}>
<MenuList>
<MenuItem className={classes.menuItem}>
<ListItemIcon className={classes.icon}>
<SendIcon />
</ListItemIcon>
<ListItemText classes={{ primary: classes.primary }} variant="inset" primary="Sent mail" />
</MenuItem>
<MenuItem className={classes.menuItem}>
<ListItemIcon className={classes.icon}>
<DraftsIcon />
</ListItemIcon>
<ListItemText classes={{ primary: classes.primary }} variant="inset" primary="Drafts" />
</MenuItem>
<MenuItem className={classes.menuItem}>
<ListItemIcon className={classes.icon}>
<InboxIcon />
</ListItemIcon>
<ListItemText classes={{ primary: classes.primary }} variant="inset" primary="Inbox" />
</MenuItem>
</MenuList>
</Paper>
);
}
StyledMenu.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(StyledMenu);
|
