2 files changed, 27 insertions, 68 deletions

diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index 1d67691c..0e5ab695 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid } from '@material-ui/core';
-import t from '../common/localization';
+import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography } from '@material-ui/core';
 import { useSelector } from 'react-redux';
 import moment from 'moment';
+import t from '../common/localization';
 
 const ReportFilter = ({ children, handleSubmit, showOnly }) => {
 
@@ -101,7 +101,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
           fullWidth />
       </Grid>}
       {children}
-      <Grid item xs={4} sm={!showOnly ? 2 : 4}>
+      <Grid item xs={!showOnly ? 4 : 12} sm={!showOnly ? 2 : 6}>
         <Button 
           onClick={() => handleClick(false, true)}
           variant='outlined'
@@ -127,7 +127,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
             variant='outlined'
             color='secondary'
             fullWidth>
-            {t('reportEmail')}
+            <Typography variant="button" noWrap>{t('reportEmail')}</Typography>
           </Button>}
       </Grid>
     </Grid>
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index 4ffc8816..fbb8a303 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -10,6 +10,9 @@ 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 { Link, useHistory, useLocation } from 'react-router-dom';
 
 import t from '../common/localization';
@@ -20,10 +23,10 @@ const useStyles = makeStyles(theme => ({
     height: '100%',
   },
   drawerContainer: {
-    width: theme.dimensions.drawerWidth,
+    width: theme.dimensions.desktopDrawerWidth,
   },
   drawer: {
-    width: theme.dimensions.drawerWidth,
+    width: theme.dimensions.desktopDrawerWidth,
     [theme.breakpoints.down("md")]: {
       width: theme.dimensions.tabletDrawerWidth,
     }
@@ -62,89 +65,45 @@ const routes = [
 const ReportLayoutPage = ({ children, filter }) => {
   const classes = useStyles();
   const history = useHistory();
-  const theme = useTheme();
   const [openDrawer, setOpenDrawer] = useState(false);
-  const location = useLocation();
-
-  const navigationList = (
-    <List disablePadding>
-      {routes.map((route, index) => (
-        <ListItem
-          disableRipple
-          component={Link}
-          key={`${route}${index}`}
-          button
-          to={route.href}
-          selected={route.href === location.pathname}>
-          <ListItemIcon>
-            {route.icon}
-          </ListItemIcon>
-          <ListItemText primary={route.name} />
-        </ListItem>
-      ))}
-    </List>
-  );
-
-  const drawerHeader = (
-    <> 
-      <div className={classes.drawerHeader}>
-        <IconButton 
-          className={classes.backArrowIconContainer} 
-          disableRipple>
-          <ArrowBackIcon />
-        </IconButton>
-        <Typography variant="h6" color="inherit" noWrap>
-          {t('reportTitle')}
-        </Typography> 
-      </div>
-      <Divider />
-    </>
-  );
-
-  const appBar = (
-    <AppBar position="fixed" color="inherit">
-      <Toolbar>
-        <IconButton
-          color="inherit"
-          aria-label="open drawer"
-          edge="start"
-          onClick={() => setOpenDrawer(!openDrawer)}
-          className={classes.menuButton}>
-          <MenuIcon />
-        </IconButton>
-        <Typography variant="h6" noWrap>
-          {t('reportTitle')}
-        </Typography>        
-      </Toolbar>
-    </AppBar>   
-  );
 
   return (
     <div className={classes.root}>
-      <Hidden mdUp>
-        {appBar}
+      <Hidden only={['lg', 'xl']}>
+        <ReportNavbar openDrawer={openDrawer} setOpenDrawer={setOpenDrawer} />
         <Drawer
           variant="temporary"
           open={openDrawer}
           onClose={() => setOpenDrawer(!openDrawer)}
           classes={{paper: classes.drawer}}>
-          {drawerHeader}
-          {navigationList}
+          <ReportSidebar routes={routes} />
         </Drawer>
       </Hidden>
-      <Hidden mdDown>
+      <Hidden only={['xs', 'sm', 'md']}>
         <div className={classes.drawerContainer}>
           <Drawer
             variant="permanent"
             classes={{paper: classes.drawer}}>
-            {drawerHeader}
-            {navigationList}
+            <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}>
         <div className={classes.toolbar} />
         {filter}
+        {children}
       </div>      
     </div>
   );