aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorDesmond Kyeremeh <elDekyfin@gmail.com>2021-07-01 13:53:44 +0000
committerDesmond Kyeremeh <elDekyfin@gmail.com>2021-07-01 13:53:44 +0000
commit36d05b64fbcd52760e023af227748b2efd74d21f (patch)
tree9f06503459dbb1f6df640a2bd834c4e85dadd4f8 /modern
parent187aa1d0de3fef7513aacd2ba9a2e36453515fa4 (diff)
downloadtrackermap-web-36d05b64fbcd52760e023af227748b2efd74d21f.tar.gz
trackermap-web-36d05b64fbcd52760e023af227748b2efd74d21f.tar.bz2
trackermap-web-36d05b64fbcd52760e023af227748b2efd74d21f.zip
Abstract ReportSidebar into SideNav component
Diffstat (limited to 'modern')
-rw-r--r--modern/src/components/SideNav.js41
-rw-r--r--modern/src/components/reports/ReportSidebar.js29
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;