1import Typography from '@mui/material/Typography';
 2import {useTheme} from '@mui/material/styles';
 3import Button from '@mui/material/Button';
 4import Box from '@mui/material/Box';
 5
 6interface Props {
 7  Icon: JSX.Element;
 8  title: string;
 9  onClick: () => void;
10  active: boolean;
11}
12
13const DrawerMenuItem = ({Icon, title, onClick, active}: Props) => {
14  const theme = useTheme();
15
16  return (
17    <Button
18      sx={{
19        display: 'block',
20        position: 'relative',
21        minWidth: 0,
22        margin: 0,
23        width: '84px',
24        height: '84px',
25        textAlign: 'center',
26        color: active
27          ? theme.palette.background.default
28          : 'rgba(256, 256, 256, .76)',
29
30        [theme.breakpoints.down('md')]: {
31          margin: '0 auto',
32          height: '56px',
33          width: '100%',
34        },
35      }}
36      onClick={onClick}
37    >
38      <Box
39        sx={{
40          position: 'relative',
41          display: 'block',
42          width: '100%',
43          padding: 0,
44        }}
45        color="inherit"
46      >
47        {Icon}
48      </Box>
49      <Typography
50        color="inherit"
51        sx={{
52          position: 'relative',
53          fontSize: '11px',
54          lineHeight: '1.1em',
55          height: 'auto',
56          display: 'flex',
57          justifyContent: 'center',
58          textTransform: 'none',
59
60          [theme.breakpoints.down('md')]: {
61            whiteSpace: 'nowrap',
62            lineHeight: '.5em',
63          },
64        }}
65      >
66        {title}
67      </Typography>
68    </Button>
69  );
70};
71
72export default DrawerMenuItem;