143 lines
4.8 KiB
TypeScript
143 lines
4.8 KiB
TypeScript
import DarkModeOutlined from "@mui/icons-material/DarkModeOutlined";
|
|
import LightModeOutlined from "@mui/icons-material/LightModeOutlined";
|
|
import BusinessIcon from '@mui/icons-material/Business';
|
|
import HubIcon from '@mui/icons-material/Hub';
|
|
import { Button, Menu, MenuItem } from "@mui/material";
|
|
import AppBar from "@mui/material/AppBar";
|
|
import Avatar from "@mui/material/Avatar";
|
|
import IconButton from "@mui/material/IconButton";
|
|
import Stack from "@mui/material/Stack";
|
|
import Toolbar from "@mui/material/Toolbar";
|
|
import Typography from "@mui/material/Typography";
|
|
import React, { useContext } from "react";
|
|
import { Link } from "react-router";
|
|
import { useGetIdentity } from "@refinedev/core";
|
|
import { HamburgerMenu, RefineThemedLayoutV2HeaderProps, ThemedTitleV2 } from "@refinedev/mui";
|
|
import { ColorModeContext } from "../../contexts/color-mode";
|
|
import { FirmContext } from "../../contexts/FirmContext";
|
|
import { Logout } from "../auth/Logout";
|
|
import { IUser } from "../../interfaces";
|
|
import MuiLink from "@mui/material/Link";
|
|
import I18nPicker from "./I18nPicker";
|
|
|
|
export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
|
|
sticky = true,
|
|
}) => {
|
|
const collapsed = false;
|
|
const { mode, setMode } = useContext(ColorModeContext);
|
|
const { currentFirm } = useContext(FirmContext);
|
|
|
|
const { data: user } = useGetIdentity<IUser>();
|
|
|
|
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
|
const openUserMenu = Boolean(anchorEl);
|
|
const handleOpenUserMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
|
|
setAnchorEl(event.currentTarget);
|
|
}
|
|
const handleCloseUserMenu = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
return (
|
|
<AppBar position={sticky ? "sticky" : "relative"}>
|
|
<Toolbar>
|
|
<Stack
|
|
direction="row"
|
|
width="100%"
|
|
justifyContent="space-between"
|
|
alignItems="center"
|
|
>
|
|
<HamburgerMenu />
|
|
{currentFirm && (
|
|
<MuiLink
|
|
to={`/firm/${currentFirm.instance}/${currentFirm.firm}`}
|
|
component={Link}
|
|
underline="none"
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "12px",
|
|
}}
|
|
>
|
|
<BusinessIcon height="24px" width="24px" color="primary" />
|
|
{!collapsed && (
|
|
<Typography
|
|
variant="h6"
|
|
fontWeight={700}
|
|
color="text.primary"
|
|
fontSize="inherit"
|
|
textOverflow="ellipsis"
|
|
overflow="hidden"
|
|
>
|
|
{currentFirm.instance} / {currentFirm.firm}
|
|
</Typography>
|
|
)}
|
|
</MuiLink>
|
|
|
|
)}
|
|
{!currentFirm && (
|
|
<ThemedTitleV2 collapsed={collapsed}/>
|
|
)}
|
|
{(user?.email) && (
|
|
<Link to="/hub"><HubIcon /></Link>
|
|
)}
|
|
<Stack
|
|
direction="row"
|
|
justifyContent="flex-end"
|
|
alignItems="center"
|
|
>
|
|
{(user?.email) && (
|
|
<Stack
|
|
direction="row"
|
|
gap="16px"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
<Button
|
|
id="user-menu-button"
|
|
aria-controls={openUserMenu ? 'user-menu' : undefined}
|
|
aria-haspopup="true"
|
|
aria-expanded={openUserMenu ? 'true' : undefined}
|
|
onClick={handleOpenUserMenu}>
|
|
<Typography
|
|
sx={{
|
|
display: {
|
|
xs: "none",
|
|
sm: "inline-block",
|
|
},
|
|
}}
|
|
variant="subtitle2"
|
|
>
|
|
{user?.email}
|
|
</Typography>
|
|
<Avatar src={"user?.avatar"} alt={user?.email} />
|
|
</Button>
|
|
<Menu
|
|
id="user-menu"
|
|
anchorEl={anchorEl}
|
|
open={openUserMenu}
|
|
onClose={handleCloseUserMenu}
|
|
slotProps={{
|
|
list:{ 'aria-labelledby': 'user-menu-button' }
|
|
}}
|
|
>
|
|
<MenuItem onClick={handleCloseUserMenu}><Logout /></MenuItem>
|
|
<MenuItem onClick={setMode}>
|
|
<IconButton color="inherit">
|
|
{mode === "dark" ? <LightModeOutlined /> : <DarkModeOutlined />}
|
|
</IconButton>
|
|
</MenuItem>
|
|
</Menu>
|
|
</Stack>
|
|
)}
|
|
{!user && (
|
|
<Link to="/login"><Button>Login</Button></Link>
|
|
)}
|
|
<I18nPicker />
|
|
</Stack>
|
|
</Stack>
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
};
|