frontend/containers/DrawerNotification/DrawerHeader.tsx (view raw)
1import React from 'react';
2import Box from '@mui/material/Box';
3import IconButton from '@mui/material/IconButton';
4import Icon from '@mui/material/Icon';
5import Typography from '@mui/material/Typography';
6import Button from '@mui/material/Button';
7import {useTranslation} from 'react-i18next';
8import useMediaQuery from '@mui/material/useMediaQuery';
9
10const DrawerHeader = ({onClose, markAllRead, disabled}) => {
11 const {t} = useTranslation();
12 const isMobile = useMediaQuery('(max-width:400px)');
13 return (
14 <Box>
15 {!isMobile && (
16 <Box display="flex" justifyContent="flex-end" alignItems="flex-end">
17 <IconButton
18 sx={{marginRight: 0}}
19 color="inherit"
20 edge="end"
21 aria-label="close"
22 onClick={onClose}
23 id="CloseBtn"
24 >
25 <Icon>close</Icon>
26 </IconButton>
27 </Box>
28 )}
29 <Box
30 display="flex"
31 alignItems="center"
32 justifyContent="space-between"
33 paddingBottom={2}
34 >
35 <Box display="flex" alignItems="center">
36 {isMobile && (
37 <IconButton
38 sx={{marginRight: 0}}
39 color="inherit"
40 edge="end"
41 aria-label="close"
42 onClick={onClose}
43 id="CloseBtn"
44 >
45 <Icon>chevron_left</Icon>
46 </IconButton>
47 )}
48 <Typography variant="h3">{`${t('notifications.title')}`}</Typography>
49 </Box>
50 <Button
51 onClick={markAllRead}
52 disabled={disabled}
53 >{t`notifications.markAllRead`}</Button>
54 </Box>
55 </Box>
56 );
57};
58
59export default DrawerHeader;