1import Typography from '@mui/material/Typography';
 2import Icon from '@mui/material/Icon';
 3import Button from '@mui/material/Button';
 4import Chip from '@mui/material/Chip';
 5import theme from '../../theme';
 6
 7interface Props {
 8  icon: string;
 9  title: string;
10  onClick: () => void;
11  active: boolean;
12}
13
14const DrawerMenuItem = ({icon, title, onClick, active}: Props) => {
15  return (
16    <Button
17      sx={{
18        display: 'flex',
19        padding: theme.spacing(2),
20        position: 'relative',
21        minWidth: 0,
22        margin: 0,
23        width: '100%',
24        justifyContent: 'flex-start',
25        color: '#242424',
26
27        [theme.breakpoints.down('md')]: {
28          margin: '0 auto',
29          width: '100%',
30          height: '80px',
31          flexDirection: 'column',
32        },
33      }}
34      onClick={onClick}
35    >
36      <Chip
37        sx={{
38          pt: 0.5,
39          backgroundColor: active ? 'primary.light' : 'transparent',
40          display: 'inline-block',
41          width: theme.spacing(6),
42          height: theme.spacing(4),
43          justifyContent: 'middle',
44        }}
45        label={
46          <Icon
47            color={active ? 'primary' : 'action'}
48            className={active ? 'material-icons' : 'material-icons-outlined'}
49          >
50            {icon}
51          </Icon>
52        }
53      />
54      <Typography
55        color="inherit"
56        sx={{
57          ml: 1,
58          position: 'relative',
59          lineHeight: '1.1em',
60          height: 'auto',
61          display: 'inline-block',
62          textTransform: 'none',
63
64          [theme.breakpoints.down('md')]: {
65            whiteSpace: 'nowrap',
66            lineHeight: '.5em',
67            ml: 0,
68            mt: 1.5,
69          },
70        }}
71      >
72        {title}
73      </Typography>
74    </Button>
75  );
76};
77
78export default DrawerMenuItem;