frontend/containers/DrawerMenu/DrawerMenuItem.tsx (view raw)
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="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 fontSize: '11px',
62 lineHeight: '1.1em',
63 height: 'auto',
64 display: 'inline-block',
65 textTransform: 'none',
66
67 [theme.breakpoints.down('md')]: {
68 whiteSpace: 'nowrap',
69 lineHeight: '.5em',
70 ml: 0,
71 mt: 1.5,
72 },
73 }}
74 >
75 {title}
76 </Typography>
77 </Button>
78 );
79};
80
81export default DrawerMenuItem;