72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
import {
|
|
Box,
|
|
Container,
|
|
IconButton,
|
|
Typography,
|
|
useTheme,
|
|
useMediaQuery,
|
|
} from "@mui/material";
|
|
import NavMenuItem from "./NavMenuItem";
|
|
import Logotip from "../../pages/Landing/images/icons/QuizLogo";
|
|
import WalletIcon from "@icons/WalletIcon";
|
|
import CustomAvatar from "./Avatar";
|
|
import { Burger } from "@icons/Burger";
|
|
import { clearAuthToken } from "@frontend/kitui";
|
|
import { logout } from "@api/auth";
|
|
import { Link, useNavigate } from "react-router-dom";
|
|
import { enqueueSnackbar } from "notistack";
|
|
import { clearUserData } from "@root/user";
|
|
import { LogoutButton } from "@ui_kit/LogoutButton";
|
|
import { ToTariffsButton } from "@ui_kit/Toolbars/ToTariffsButton";
|
|
|
|
export default function HeaderFull() {
|
|
const theme = useTheme();
|
|
const navigate = useNavigate();
|
|
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
|
const isMobile = useMediaQuery(theme.breakpoints.down(500));
|
|
|
|
async function handleLogoutClick() {
|
|
const [, logoutError] = await logout();
|
|
|
|
if (logoutError) {
|
|
return enqueueSnackbar(logoutError);
|
|
}
|
|
|
|
clearAuthToken();
|
|
clearUserData();
|
|
navigate("/");
|
|
}
|
|
|
|
return (
|
|
<Container
|
|
component="nav"
|
|
disableGutters
|
|
maxWidth={false}
|
|
sx={{
|
|
px: "16px",
|
|
display: "flex",
|
|
height: "80px",
|
|
alignItems: "center",
|
|
gap: isTablet ? "20px" : "60px",
|
|
flexDirection: "row",
|
|
justifyContent: isMobile ? "space-between" : "center",
|
|
bgcolor: "white",
|
|
borderBottom: "1px solid #E3E3E3",
|
|
}}
|
|
>
|
|
<Link to="/">
|
|
<Logotip width={124} />
|
|
</Link>
|
|
<Box sx={{ display: "flex", ml: "auto" }}>
|
|
<ToTariffsButton />
|
|
<LogoutButton
|
|
onClick={handleLogoutClick}
|
|
sx={{
|
|
ml: "20px",
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Container>
|
|
);
|
|
}
|