81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import DarkModeOutlined from "@mui/icons-material/DarkModeOutlined";
|
|
import LightModeOutlined from "@mui/icons-material/LightModeOutlined";
|
|
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 { useGetIdentity } from "@refinedev/core";
|
|
import { HamburgerMenu, RefineThemedLayoutV2HeaderProps } from "@refinedev/mui";
|
|
import React, { useContext } from "react";
|
|
import { ColorModeContext } from "../../contexts/color-mode";
|
|
|
|
type IUser = {
|
|
id: number;
|
|
name: string;
|
|
avatar: string;
|
|
};
|
|
|
|
export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
|
|
sticky = true,
|
|
}) => {
|
|
const { mode, setMode } = useContext(ColorModeContext);
|
|
|
|
const { data: user } = useGetIdentity<IUser>();
|
|
|
|
return (
|
|
<AppBar position={sticky ? "sticky" : "relative"}>
|
|
<Toolbar>
|
|
<Stack
|
|
direction="row"
|
|
width="100%"
|
|
justifyContent="flex-end"
|
|
alignItems="center"
|
|
>
|
|
<HamburgerMenu />
|
|
<Stack
|
|
direction="row"
|
|
width="100%"
|
|
justifyContent="flex-end"
|
|
alignItems="center"
|
|
>
|
|
<IconButton
|
|
color="inherit"
|
|
onClick={() => {
|
|
setMode();
|
|
}}
|
|
>
|
|
{mode === "dark" ? <LightModeOutlined /> : <DarkModeOutlined />}
|
|
</IconButton>
|
|
|
|
{(user?.avatar || user?.name) && (
|
|
<Stack
|
|
direction="row"
|
|
gap="16px"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
{user?.name && (
|
|
<Typography
|
|
sx={{
|
|
display: {
|
|
xs: "none",
|
|
sm: "inline-block",
|
|
},
|
|
}}
|
|
variant="subtitle2"
|
|
>
|
|
{user?.name}
|
|
</Typography>
|
|
)}
|
|
<Avatar src={user?.avatar} alt={user?.name} />
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
};
|