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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import SendIcon from '@material-ui/icons/Send';
import ReportIcon from '@material-ui/icons/Report';
import StarIcon from '@material-ui/icons/Star';
import Flag from '@material-ui/icons/Flag';
import People from '@material-ui/icons/People';
import QuestionAnswer from '@material-ui/icons/QuestionAnswer';
import LabelIcon from '@material-ui/icons/Label';
import Add from '@material-ui/icons/Add';
import {
Drawer,
List,
ListItem,
ListItemIcon,
ListItemText,
Hidden,
Button,
Divider,
} from '@material-ui/core';
import styles from './email-jss';
const MenuList = props => {
const {
classes,
compose,
goto,
selected,
} = props;
return (
<Fragment>
<List>
<ListItem>
<Button variant="contained" onClick={compose} fullWidth color="primary">
<Add />
{' '}
Compose
</Button>
</ListItem>
<ListItem button className={selected === 'inbox' ? classes.selected : ''} onClick={() => goto('inbox')}>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="Inbox" />
</ListItem>
<ListItem button className={selected === 'stared' ? classes.selected : ''} onClick={() => goto('stared')}>
<ListItemIcon>
<StarIcon />
</ListItemIcon>
<ListItemText primary="Stared" />
</ListItem>
<ListItem button className={selected === 'sent' ? classes.selected : ''} onClick={() => goto('sent')}>
<ListItemIcon>
<SendIcon />
</ListItemIcon>
<ListItemText primary="Sent" />
</ListItem>
<ListItem button className={selected === 'spam' ? classes.selected : ''} onClick={() => goto('spam')}>
<ListItemIcon>
<ReportIcon />
</ListItemIcon>
<ListItemText primary="Spam" />
</ListItem>
</List>
<Divider className={classes.divider} />
<List>
<ListItem button className={selected === 'updates' ? classes.selected : ''} onClick={() => goto('updates')}>
<ListItemIcon>
<Flag className={classes.iconOrange} />
</ListItemIcon>
<ListItemText primary="Updates" />
</ListItem>
<ListItem button className={selected === 'social' ? classes.selected : ''} onClick={() => goto('social')}>
<ListItemIcon>
<People className={classes.iconRed} />
</ListItemIcon>
<ListItemText primary="Social" />
</ListItem>
<ListItem button className={selected === 'promos' ? classes.selected : ''} onClick={() => goto('promos')}>
<ListItemIcon>
<LabelIcon className={classes.iconBlue} />
</ListItemIcon>
<ListItemText primary="Promos" />
</ListItem>
<ListItem button className={selected === 'forums' ? classes.selected : ''} onClick={() => goto('forums')}>
<ListItemIcon>
<QuestionAnswer className={classes.iconCyan} />
</ListItemIcon>
<ListItemText primary="Forums" />
</ListItem>
</List>
</Fragment>
);
};
MenuList.propTypes = {
classes: PropTypes.object.isRequired,
compose: PropTypes.func.isRequired,
goto: PropTypes.func.isRequired,
selected: PropTypes.string.isRequired,
};
const MenuEmail = withStyles(styles)(MenuList);
class EmailSidebar extends React.Component {
render() {
const {
classes,
compose,
goto,
selected,
handleDrawerToggle,
mobileOpen
} = this.props;
return (
<Fragment>
<Hidden mdUp>
<Drawer
variant="temporary"
open={mobileOpen}
onClose={handleDrawerToggle}
classes={{
paper: classes.drawerPaper,
}}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
>
<div className={classes.toolbar} />
<MenuEmail compose={compose} goto={goto} selected={selected} />
</Drawer>
</Hidden>
<Hidden smDown>
<Drawer
variant="permanent"
className={classes.sidebar}
classes={{
paper: classes.drawerPaper,
}}
>
<div className={classes.toolbar} />
<MenuEmail compose={compose} goto={goto} selected={selected} />
</Drawer>
</Hidden>
</Fragment>
);
}
}
EmailSidebar.propTypes = {
classes: PropTypes.object.isRequired,
compose: PropTypes.func.isRequired,
goto: PropTypes.func.isRequired,
handleDrawerToggle: PropTypes.func.isRequired,
selected: PropTypes.string.isRequired,
mobileOpen: PropTypes.bool.isRequired,
};
export default withStyles(styles)(EmailSidebar);
|
