Merge branch 'master' into add_country_flags

# Conflicts:
#	modern/package-lock.json

1 files changed, 33 insertions, 0 deletions

diff --git a/modern/src/common/components/SideNav.jsx b/modern/src/common/components/SideNav.jsx
new file mode 100644
index 00000000..97968bd1
--- /dev/null
+++ b/modern/src/common/components/SideNav.jsx
@@ -0,0 +1,33 @@
+import React, { Fragment } from 'react';
+import {
+  List, ListItemText, ListItemIcon, Divider, ListSubheader, ListItemButton,
+} from '@mui/material';
+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>
+      ) : (
+        <ListItemButton
+          disableRipple
+          component={Link}
+          key={route.href}
+          to={route.href}
+          selected={location.pathname.match(route.match || route.href) !== null}
+        >
+          <ListItemIcon>{route.icon}</ListItemIcon>
+          <ListItemText primary={route.name} />
+        </ListItemButton>
+      )))}
+    </List>
+  );
+};
+
+export default SideNav;