Organize common code

1 files changed, 34 insertions, 0 deletions

diff --git a/modern/src/common/components/SideNav.js b/modern/src/common/components/SideNav.js
new file mode 100644
index 00000000..ad7c212a
--- /dev/null
+++ b/modern/src/common/components/SideNav.js
@@ -0,0 +1,34 @@
+import React, { Fragment } 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 ? (
+        <Fragment key={route.subheader}>
+          <Divider />
+          <ListSubheader>{route.subheader}</ListSubheader>
+        </Fragment>
+      ) : (
+        <ListItem
+          disableRipple
+          component={Link}
+          key={route.href}
+          button
+          to={route.href}
+          selected={location.pathname.match(route.match || route.href) !== null}
+        >
+          <ListItemIcon>{route.icon}</ListItemIcon>
+          <ListItemText primary={route.name} />
+        </ListItem>
+      )))}
+    </List>
+  );
+};
+
+export default SideNav;