1 files changed, 162 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/Email/EmailSidebar.js b/front/odiparpack/app/components/Email/EmailSidebar.js
new file mode 100644
index 0000000..1951de2
--- /dev/null
+++ b/front/odiparpack/app/components/Email/EmailSidebar.js
@@ -0,0 +1,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);