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