115 lines
4.0 KiB
TypeScript
115 lines
4.0 KiB
TypeScript
import DarkModeOutlined from "@mui/icons-material/DarkModeOutlined";
|
|
import LightModeOutlined from "@mui/icons-material/LightModeOutlined";
|
|
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 } from "@refinedev/mui";
|
|
import { ColorModeContext } from "../../contexts/color-mode";
|
|
import { FirmContext } from "../../contexts/FirmContext";
|
|
import { Logout } from "../auth/Logout";
|
|
import { IUser } from "../../interfaces";
|
|
|
|
export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
|
|
sticky = true,
|
|
}) => {
|
|
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 && (
|
|
<Link to={`/firm/${currentFirm.instance}/${currentFirm.firm}`} ><Typography variant="h4" >{currentFirm.instance} / {currentFirm.firm}</Typography></Link>
|
|
)}
|
|
{!currentFirm && (
|
|
<Link to="/" ><Typography variant="h4">Roleplay Contracts</Typography></Link>
|
|
)}
|
|
{(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}
|
|
MenuListProps={{
|
|
'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="/auth/login"><Button>Login</Button></Link>
|
|
)}
|
|
|
|
</Stack>
|
|
</Stack>
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
};
|