modern/src/components/reports/ReportSidebar.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

import React from 'react';
import { List, ListItem, ListItemText, ListItemIcon } from '@material-ui/core';
import { Link, useLocation } from 'react-router-dom';

const ReportNavbar = ({ 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 ReportNavbar;