5 files changed, 67 insertions, 3 deletions
diff --git a/modern/src/components/LoginForm.js b/modern/src/components/registration/LoginForm.js
index d52a51dd..6469b31b 100644
--- a/modern/src/components/LoginForm.js
+++ b/modern/src/components/registration/LoginForm.js
@@ -3,8 +3,8 @@ import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormCont
 import { useTheme } from '@material-ui/core/styles';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import { sessionActions } from './../store';
-import t from './../common/localization';
+import { sessionActions } from '../../store';
+import t from '../../common/localization';
 import RegisterForm from './RegisterForm';
 import ResetPasswordForm from './ResetPasswordForm';
 
diff --git a/modern/src/components/RegisterForm.js b/modern/src/components/registration/RegisterForm.js
index 6d013f70..c2af04ba 100644
--- a/modern/src/components/RegisterForm.js
+++ b/modern/src/components/registration/RegisterForm.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Grid, Button, TextField, Typography, Link, makeStyles, Snackbar } from '@material-ui/core';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import LoginForm from './LoginForm';
-import t from './../common/localization';
+import t from './../../common/localization';
 
 const useStyles = makeStyles(theme => ({
   register: {
diff --git a/modern/src/components/ResetPasswordForm.js b/modern/src/components/registration/ResetPasswordForm.js
index c268f808..c268f808 100644
--- a/modern/src/components/ResetPasswordForm.js
+++ b/modern/src/components/registration/ResetPasswordForm.js
diff --git a/modern/src/components/reports/ReportNavbar.js b/modern/src/components/reports/ReportNavbar.js
new file mode 100644
index 00000000..93c01a06
--- /dev/null
+++ b/modern/src/components/reports/ReportNavbar.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
+
+import MenuIcon from '@material-ui/icons/Menu';
+import t from '../../common/localization';
+
+const useStyles = makeStyles(theme => ({
+  menuButton: {
+  }
+}));
+const ReportNavbar = ({ openDrawer, setOpenDrawer, reportName }) => {
+  
+  const classes = useStyles();
+
+  return (
+    <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')} / {reportName}
+        </Typography>        
+      </Toolbar>
+    </AppBar> 
+  )
+}
+
+export default ReportNavbar;
diff --git a/modern/src/components/reports/ReportSidebar.js b/modern/src/components/reports/ReportSidebar.js
new file mode 100644
index 00000000..e42c36ee
--- /dev/null
+++ b/modern/src/components/reports/ReportSidebar.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
+import { Link, useHistory, useLocation } from 'react-router-dom';
+
+const ReportNavbar = ({ routes, setReportName }) => {
+
+  const location = useLocation();
+
+  return (
+    <List disablePadding>
+      {routes.map((route, index) => (
+        <ListItem
+          disableRipple
+          component={Link}
+          key={`${route}${index}`}
+          button
+          to={route.href}
+          selected={route.href === location.pathname}
+          onClick={() =>  setReportName(route.name)}>
+          <ListItemIcon>
+            {route.icon}
+          </ListItemIcon>
+          <ListItemText primary={route.name} />
+        </ListItem>
+      ))}
+    </List>
+  )
+}
+
+export default ReportNavbar;