Abstract ReportSidebar into SideNav component

1 files changed, 41 insertions, 0 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;