modern/src/components/SideNav.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
30
31
32
33
34

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={location.pathname.match(route.match || route.href)}
          >
            <ListItemIcon>{route.icon}</ListItemIcon>
            <ListItemText primary={route.name} />
          </ListItem>
        )
      )}
    </List>
  );
};

export default SideNav;