src/common/components/SideNav.jsx


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

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;