1  import React from 'react';
 2  import Box from '@mui/material/Box';
 3  import IconButton from '@mui/material/IconButton';
 4  import Icon from '@mui/material/Icon';
 5  import Typography from '@mui/material/Typography';
 6  import Button from '@mui/material/Button';
 7  import {useTranslation} from 'react-i18next';
 8  import useMediaQuery from '@mui/material/useMediaQuery';
 9  
10  const 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  
59  export default DrawerHeader;