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;