71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
import { Box, Container, IconButton, Typography, useTheme } from "@mui/material";
|
||
import LogoutIcon from "@icons/LogoutIcon";
|
||
import NavMenuItem from "./NavMenuItem";
|
||
import PenaLogo from "../PenaLogo";
|
||
import WalletIcon from "@icons/WalletIcon";
|
||
import CustomAvatar from "./Avatar";
|
||
|
||
|
||
export default function HeaderFull() {
|
||
const theme = useTheme();
|
||
|
||
return (
|
||
<Container
|
||
component="nav"
|
||
disableGutters
|
||
maxWidth={false}
|
||
sx={{
|
||
px: "16px",
|
||
display: "flex",
|
||
height: "80px",
|
||
alignItems: "center",
|
||
gap: "60px",
|
||
bgcolor: "white",
|
||
borderBottom: "1px solid #E3E3E3",
|
||
}}
|
||
>
|
||
<PenaLogo width={124} />
|
||
<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: "flex",
|
||
ml: "auto",
|
||
}}
|
||
>
|
||
<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>
|
||
<CustomAvatar sx={{ ml: "27px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }} />
|
||
<IconButton
|
||
sx={{ ml: "20px", bgcolor: "#F2F3F7", borderRadius: "6px", height: "36px", width: "36px" }}
|
||
>
|
||
<LogoutIcon />
|
||
</IconButton>
|
||
</Box>
|
||
</Container>
|
||
);
|
||
} |