frontend/containers/DrawerMenu/DrawerMenuItem.tsx (view raw)
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;