1  import Typography from '@mui/material/Typography';
 2  import Icon from '@mui/material/Icon';
 3  import Button from '@mui/material/Button';
 4  import Chip from '@mui/material/Chip';
 5  import {useTheme} from '@mui/material/styles';
 6  
 7  interface Props {
 8    icon: string;
 9    title: string;
10    onClick: () => void;
11    active: boolean;
12  }
13  
14  const 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  
80  export default DrawerMenuItem;