Abstract ReportSidebar into SideNav component

2 files changed, 41 insertions, 29 deletions

diff --git a/modern/src/components/SideNav.js b/modern/src/components/SideNav.js
new file mode 100644
index 00000000..669c79ad
--- /dev/null
+++ b/modern/src/components/SideNav.js
@@ -0,0 +1,41 @@
+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, index) =>
+        route.subheader ? (
+          <>
+            <Divider />
+            <ListSubheader>{route.subheader}</ListSubheader>
+          </>
+        ) : (
+          <ListItem
+            disableRipple
+            component={Link}
+            key={route.href || route.subheader}
+            button
+            to={route.href}
+            selected={route.href === location.pathname}
+          >
+            <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 90e20c05..00000000
--- a/modern/src/components/reports/ReportSidebar.js
+++ /dev/null
@@ -1,29 +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, 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>
-  )
-}
-
-export default ReportSidebar;