1 files changed, 103 insertions, 23 deletions
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index e5eda05e..fafffc72 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -1,42 +1,122 @@
-import React from 'react';
-import { Grid, Paper, makeStyles } from '@material-ui/core';
-import MainToolbar from '../MainToolbar';
+import React, { useState, useEffect } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { Grid, Typography, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
+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 ArrowBackIcon from '@material-ui/icons/ArrowBack';
+
+import ReportSidebar from '../components/reports/ReportSidebar'
+import ReportNavbar from '../components/reports/ReportNavbar'
+import t from '../common/localization';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    height: '100%',
     display: 'flex',
-    flexDirection: 'column',
+    height: '100%',
   },
+  drawerContainer: {
+    width: theme.dimensions.drawerWidthDesktop,
+  },
+  drawer: {
+    width: theme.dimensions.drawerWidthDesktop,
+    [theme.breakpoints.down("md")]: {
+      width: theme.dimensions.drawerWidthTablet,
+    }
+  }, 
   content: {
     flex: 1,
-    overflow: 'auto',
-    padding: theme.spacing(2),
+    padding: theme.spacing(5, 3, 3, 3),
+  },
+  drawerHeader: {
+    ...theme.mixins.toolbar,
+    display: 'flex',
+    alignItems: 'center',
+    padding: theme.spacing(0, 1),
+  },
+  backArrowIconContainer: {
+    '&:hover': {
+      backgroundColor:"transparent"
+    }  
   },
-  form: {
-    padding: theme.spacing(1, 2, 2),
+  toolbar: {
+    [theme.breakpoints.down("md")]: {
+      ...theme.mixins.toolbar,
+    }
   },
 }));
 
-const ReportLayoutPage = ({ children, filter }) => {
+const routes = [
+  { name: t('reportRoute'), href: '/reports/route', icon: <TimelineIcon /> },
+  { name: t('reportEvents'), href: '/reports/event', icon: <NotificationsActiveIcon /> },
+  { name: t('reportTrips'), href: '/reports/trip', icon: <PlayCircleFilledIcon /> },
+  { name: t('reportStops'), href: '/reports/stop', icon: <PauseCircleFilledIcon /> },
+  { name: t('reportSummary'), href: '/reports/summary', icon: <FormatListBulletedIcon /> },
+  { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> },
+];
+
+const ReportLayoutPage = ({ children, filter, }) => {
   const classes = useStyles();
+  const history = useHistory();
+  const location = useLocation();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [reportTitle, setReportTitle] = useState();
+
+  useEffect(() => {
+    routes.forEach(route => {
+      switch (location.pathname) {
+        case `${route.href}`:
+          setReportTitle(route.name);
+          break;
+        default:
+          break;
+      }
+    });
+  }, []);
+
   return (
     <div className={classes.root}>
-      <MainToolbar />
+      <Hidden only={['lg', 'xl']}>
+        <ReportNavbar setOpenDrawer={setOpenDrawer} reportTitle={reportTitle} />
+        <Drawer
+          variant="temporary"
+          open={openDrawer}
+          onClose={() => setOpenDrawer(!openDrawer)}
+          classes={{paper: classes.drawer}}>
+          <ReportSidebar routes={routes} />
+        </Drawer>
+      </Hidden>
+      <Hidden only={['xs', 'sm', 'md']}>
+        <div className={classes.drawerContainer}>
+          <Drawer
+            variant="permanent"
+            classes={{paper: classes.drawer}}>
+            <div className={classes.drawerHeader}>
+              <IconButton
+                onClick={() => history.push('/')}
+                className={classes.backArrowIconContainer} 
+                disableRipple>
+                <ArrowBackIcon />
+              </IconButton>
+              <Typography variant="h6" color="inherit" noWrap>
+                {t('reportTitle')}
+              </Typography> 
+            </div>
+            <Divider />
+            <ReportSidebar routes={routes} />
+          </Drawer>
+        </div>
+      </Hidden>
       <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>
+        <div className={classes.toolbar} />
+        <Grid container direction="column" spacing={2}>
+          <Grid item>{filter}</Grid>
+          <Grid item>{children}</Grid>
         </Grid>
-      </div>
+      </div>      
     </div>
   );
 }