health-apps-cms/src/layouts/mainLayout/components/Header.jsx

49 lines
1.5 KiB
JavaScript

import React from 'react';
import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
import ProfileSection from './ProfileSection';
import { useStyles } from '../mainLayoutStyles';
import NotificationSection from './NotificationSection ';
import { useSelector } from 'react-redux';
import { CLINIC_STATUS, USER_ROLES } from '../../../constants';
function Header() {
const theme = useTheme();
const user = useSelector((state) => state?.login?.user);
const classes = useStyles();
const isBelowMD = useMediaQuery((theme) => theme.breakpoints.down('md'));
return (
<>
<Box
className={
isBelowMD ? classes.headerMainDivMobile : classes.headerMainDiv
}
>
<Typography>
{user?.userType == USER_ROLES.SUPER_ADMIN.toLowerCase() ? null : `Welcome to ${user?.created_clinics?.[0]?.name}`}
</Typography>
<Box className={classes.profilDiv}>
<NotificationSection />
<Box
sx={{
zIndex:
user?.company?.status === CLINIC_STATUS.NOT_REVIEWED ||
user?.company?.status ===
CLINIC_STATUS.APPROVAL_PENDING_DOCUMENT_RESUBMITTED
? theme.zIndex.modal + 1
: user?.company?.status === CLINIC_STATUS.APPROVED
? 'auto'
: theme.zIndex.appBar,
}}
>
<ProfileSection />
</Box>
</Box>
</Box>
</>
);
}
export default Header;