3 files changed, 37 insertions, 37 deletions
diff --git a/modern/src/components/reports/ReportNavbar.js b/modern/src/components/NavBar.js
index 16807e89..93e79bbb 100644
--- a/modern/src/components/reports/ReportNavbar.js
+++ b/modern/src/components/NavBar.js
@@ -3,9 +3,8 @@ import {
   AppBar, Toolbar, Typography, IconButton,
 } from '@material-ui/core';
 import MenuIcon from '@material-ui/icons/Menu';
-import t from '../../common/localization';
 
-const ReportNavbar = ({ setOpenDrawer, reportTitle }) => (
+const Navbar = ({ setOpenDrawer, title }) => (
   <AppBar position="fixed" color="inherit">
     <Toolbar>
       <IconButton
@@ -17,12 +16,10 @@ const ReportNavbar = ({ setOpenDrawer, reportTitle }) => (
         <MenuIcon />
       </IconButton>
       <Typography variant="h6" noWrap>
-        {t('reportTitle')}
-        {' '}
-        {` / ${reportTitle}`}
+        {title}
       </Typography>
     </Toolbar>
   </AppBar>
 );
 
-export default ReportNavbar;
+export default Navbar;
diff --git a/modern/src/components/SideNav.js b/modern/src/components/SideNav.js
new file mode 100644
index 00000000..bcf8ecd5
--- /dev/null
+++ b/modern/src/components/SideNav.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import {
+  List, ListItem, ListItemText, ListItemIcon, Divider, ListSubheader,
+} from '@material-ui/core';
+import { Link, useLocation } from 'react-router-dom';
+
+const SideNav = ({ routes }) => {
+  const location = useLocation();
+
+  return (
+    <List disablePadding style={{ paddingTop: '16px' }}>
+      {routes.map((route) => (route.subheader ? (
+        <>
+          <Divider />
+          <ListSubheader>{route.subheader}</ListSubheader>
+        </>
+      ) : (
+        <ListItem
+          disableRipple
+          component={Link}
+          key={route.href || route.subheader}
+          button
+          to={route.href}
+          selected={location.pathname.match(route.match || route.href)}
+        >
+          <ListItemIcon>{route.icon}</ListItemIcon>
+          <ListItemText primary={route.name} />
+        </ListItem>
+      )))}
+    </List>
+  );
+};
+
+export default SideNav;
diff --git a/modern/src/components/reports/ReportSidebar.js b/modern/src/components/reports/ReportSidebar.js
deleted file mode 100644
index 686fc040..00000000
--- a/modern/src/components/reports/ReportSidebar.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import {
-  List, ListItem, ListItemText, ListItemIcon,
-} from '@material-ui/core';
-import { Link, useLocation } from 'react-router-dom';
-
-const ReportSidebar = ({ routes }) => {
-  const location = useLocation();
-
-  return (
-    <List disablePadding style={{ paddingTop: '16px' }}>
-      {routes.map((route) => (
-        <ListItem
-          disableRipple
-          component={Link}
-          key={route}
-          button
-          to={route.href}
-          selected={route.href === location.pathname}
-        >
-          <ListItemIcon>
-            {route.icon}
-          </ListItemIcon>
-          <ListItemText primary={route.name} />
-        </ListItem>
-      ))}
-    </List>
-  );
-};
-
-export default ReportSidebar;