126 lines
3.5 KiB
TypeScript
126 lines
3.5 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";
|
||
|
||
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: isMobile ? "row-reverse" : "row",
|
||
justifyContent: isMobile ? "space-between" : "center",
|
||
bgcolor: "white",
|
||
borderBottom: "1px solid #E3E3E3",
|
||
}}
|
||
>
|
||
{isTablet && (
|
||
<Burger
|
||
// onClick={() => setMobileSidebar(!mobileSidebar)}
|
||
style={{ fontSize: "30px", color: "#000000", cursor: "pointer" }}
|
||
/>
|
||
)}
|
||
<Link to="/">
|
||
<Logotip width={124} />
|
||
</Link>
|
||
{!isTablet && (
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
gap: "30px",
|
||
overflow: "hidden",
|
||
}}
|
||
>
|
||
{/* <NavMenuItem text="Квизы" />
|
||
<NavMenuItem text="Меню 2" isActive />
|
||
<NavMenuItem text="Меню 3" />
|
||
<NavMenuItem text="Меню 4" />
|
||
<NavMenuItem text="Меню 5" />
|
||
<NavMenuItem text="Меню 1" />
|
||
<NavMenuItem text="Меню 2" /> */}
|
||
</Box>
|
||
)}
|
||
<Box sx={{ display: isMobile ? "none" : "flex", ml: "auto" }}>
|
||
{/* {!isTablet && (
|
||
<>
|
||
<IconButton sx={{ p: 0 }}>
|
||
<WalletIcon color={theme.palette.grey2.main} bgcolor="#F2F3F7" />
|
||
</IconButton>
|
||
<Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>
|
||
<Typography
|
||
sx={{
|
||
fontSize: "12px",
|
||
lineHeight: "14px",
|
||
color: theme.palette.grey3.main,
|
||
}}
|
||
>
|
||
Мой баланс
|
||
</Typography>
|
||
<Typography variant="body2" color={theme.palette.brightPurple.main}>
|
||
00.00 руб.
|
||
</Typography>
|
||
</Box>
|
||
</>
|
||
)} */}
|
||
{!isMobile && (
|
||
<>
|
||
{/* <CustomAvatar
|
||
sx={{
|
||
ml: "27px",
|
||
backgroundColor: theme.palette.orange.main,
|
||
height: "36px",
|
||
width: "36px",
|
||
}}
|
||
/> */}
|
||
<LogoutButton
|
||
onClick={handleLogoutClick}
|
||
sx={{
|
||
ml: "20px",
|
||
}}
|
||
/>
|
||
</>
|
||
)}
|
||
</Box>
|
||
</Container>
|
||
);
|
||
}
|