Initial Report Sidebar Draft

1 files changed, 88 insertions, 19 deletions

diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index e5eda05..c5e13fd 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -1,18 +1,41 @@
-import React from 'react';
-import { Grid, Paper, makeStyles } from '@material-ui/core';
-import MainToolbar from '../MainToolbar';
+import React, { useState } from 'react';
+import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Grid, Paper, Drawer, makeStyles, useMediaQuery, IconButton } from '@material-ui/core';
+import { useTheme } from "@material-ui/core/styles";
+import MenuIcon from '@material-ui/icons/Menu';
+import TimelineIcon from '@material-ui/icons/Timeline';
+import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled';
+import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
+import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';
+import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
+import TrendingUpIcon from '@material-ui/icons/TrendingUp';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+
+import { Link } from "react-router-dom";
+
+import t from '../common/localization';
 
 const useStyles = makeStyles(theme => ({
   root: {
     height: '100%',
     display: 'flex',
-    flexDirection: 'column',
   },
   content: {
     flex: 1,
     overflow: 'auto',
     padding: theme.spacing(2),
   },
+  drawer: {
+    width: 360,
+    [theme.breakpoints.down("md")]: {
+      width: 320,
+    }
+  },
+  drawerHeader: {
+    ...theme.mixins.toolbar,
+    display: 'flex',
+    alignItems: 'center',
+    padding: theme.spacing(0, 1),
+  },
   form: {
     padding: theme.spacing(1, 2, 2),
   },
@@ -20,23 +43,69 @@ const useStyles = makeStyles(theme => ({
 
 const ReportLayoutPage = ({ children, filter }) => {
   const classes = useStyles();
+  const theme = useTheme();
+  const matchesMD = useMediaQuery(theme.breakpoints.down("md"));
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  const routes = [
+    { name: t('reportRoute'), link: '/reports/route', icon: <TimelineIcon />, activeIndex: 0 },
+    { name: t('reportEvents'), link: '/reports/event', icon: <NotificationsActiveIcon />, activeIndex: 1 },
+    { name: t('reportTrips'), link: '/reports/trip', icon: <PlayCircleFilledIcon />, activeIndex: 2 },
+    { name: t('reportStops'), link: '/reports/stop', icon: <PauseCircleFilledIcon />, activeIndex: 3 },
+    { name: t('reportSummary'), link: '/reports/summary', icon: <FormatListBulletedIcon />, activeIndex: 4 },
+    { name: t('reportChart'), link: '/reports/chart', icon: <TrendingUpIcon />, activeIndex: 5 },
+  ];
+
   return (
     <div className={classes.root}>
-      <MainToolbar />
-      <div className={classes.content}>
-        <Grid container spacing={2}>
-          <Grid item xs={12} md={3} lg={2}>
-            <Paper className={classes.form}>
-              {filter}
-            </Paper>
-          </Grid>
-          <Grid item xs={12} md={9} lg={10}>
-            <Paper>
-              {children}
-            </Paper>
-          </Grid>
-        </Grid>
-      </div>
+      {matchesMD && <AppBar position="fixed">
+          <Toolbar>
+            <IconButton
+              color="inherit"
+              aria-label="open drawer"
+              edge="start"
+              onClick={() => setOpenDrawer(!openDrawer)}
+              className={classes.menuButton}
+            >
+              <MenuIcon />
+            </IconButton>
+            <Typography variant="h6" noWrap>
+              Reports
+            </Typography>          
+          </Toolbar>
+        </AppBar>
+      }
+      <Drawer
+        variant={matchesMD ? "temporary": "permanent"}
+        open={openDrawer}
+        onClose={() => setOpenDrawer(!openDrawer)}
+        classes={{ paper: classes.drawer }}
+      >
+        <div className={classes.drawerHeader}>
+          <IconButton>
+            <ChevronLeftIcon />
+          </IconButton>
+        </div>
+        <Divider />
+        <List disablePadding>
+          {routes.map(route => (
+            <ListItem
+              key={`${route}${route.activeIndex}`}
+              button
+              component={Link}
+              to={route.link}
+              onClick={() => setOpenDrawer(false)}
+            >
+              <ListItemIcon>
+                {route.icon}
+              </ListItemIcon>
+              <ListItemText className={classes.drawerItem} disableTypography>
+                {route.name}
+              </ListItemText>
+            </ListItem>
+          ))}
+        </List>
+      </Drawer>
     </div>
   );
 }