114 lines
3.9 KiB
TypeScript
114 lines
3.9 KiB
TypeScript
|
import { Box, Button, Container, IconButton, Typography, useTheme } from "@mui/material";
|
|||
|
|
import LogoutIcon from "./LogoutIcon";
|
|||
|
|
import NavMenuItem from "../NavMenuItem";
|
|||
|
|
import PenaLogo from "../PenaLogo";
|
|||
|
|
import SectionWrapper from "../SectionWrapper";
|
|||
|
|
import WalletIcon from "./WalletIcon";
|
|||
|
|
import CustomAvatar from "./Avatar";
|
|||
|
|
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
isLoggedIn: boolean;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function Navbar({ isLoggedIn }: Props) {
|
|||
|
|
const theme = useTheme();
|
|||
|
|
|
|||
|
|
return isLoggedIn ? (
|
|||
|
|
<Container
|
|||
|
|
component="nav"
|
|||
|
|
maxWidth={false}
|
|||
|
|
sx={{
|
|||
|
|
px: "20px",
|
|||
|
|
display: "flex",
|
|||
|
|
height: "80px",
|
|||
|
|
alignItems: "center",
|
|||
|
|
gap: "60px",
|
|||
|
|
bgcolor: "white",
|
|||
|
|
borderBottom: "1px solid #E3E3E3",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<PenaLogo theme="light" width={124} />
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
gap: "30px",
|
|||
|
|
overflow: "hidden",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<NavMenuItem text="Меню 1" />
|
|||
|
|
<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={{ bgcolor: "#F2F3F7", borderRadius: "6px", height: "36px", width: "36px" }}>
|
|||
|
|
<WalletIcon />
|
|||
|
|
</IconButton>
|
|||
|
|
<Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>
|
|||
|
|
<Typography
|
|||
|
|
sx={{
|
|||
|
|
fontSize: "12px",
|
|||
|
|
lineHeight: "14px",
|
|||
|
|
color: "#4D4D4D",
|
|||
|
|
}}
|
|||
|
|
>Мой баланс</Typography>
|
|||
|
|
<Typography variant="body2" color={theme.palette.custom.brightPurple.main}>00.00 руб.</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<CustomAvatar sx={{ ml: "27px", backgroundColor: "#FB5607", height: "36px", width: "36px" }} />
|
|||
|
|
<IconButton sx={{ ml: "20px", bgcolor: "#F2F3F7", borderRadius: "6px", height: "36px", width: "36px" }}>
|
|||
|
|
<LogoutIcon />
|
|||
|
|
</IconButton>
|
|||
|
|
</Box>
|
|||
|
|
</Container>
|
|||
|
|
) : (
|
|||
|
|
<SectionWrapper
|
|||
|
|
component="nav"
|
|||
|
|
maxWidth="lg"
|
|||
|
|
outerContainerSx={{
|
|||
|
|
backgroundColor: theme.palette.custom.lightPurple.main,
|
|||
|
|
// borderBottom: "1px solid #E3E3E3",
|
|||
|
|
}}
|
|||
|
|
sx={{
|
|||
|
|
px: "20px",
|
|||
|
|
display: "flex",
|
|||
|
|
justifyContent: "space-between",
|
|||
|
|
height: "80px",
|
|||
|
|
alignItems: "center",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
gap: "30px",
|
|||
|
|
overflow: "hidden",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<NavMenuItem text="Меню 1" />
|
|||
|
|
<NavMenuItem text="Меню 2" isActive />
|
|||
|
|
<NavMenuItem text="Меню 3" />
|
|||
|
|
<NavMenuItem text="Меню 4" />
|
|||
|
|
<NavMenuItem text="Меню 5" />
|
|||
|
|
<NavMenuItem text="Меню 1" />
|
|||
|
|
<NavMenuItem text="Меню 2" />
|
|||
|
|
</Box>
|
|||
|
|
<Button
|
|||
|
|
variant="outlined"
|
|||
|
|
sx={{
|
|||
|
|
px: "18px",
|
|||
|
|
py: "10px",
|
|||
|
|
borderColor: "white",
|
|||
|
|
borderRadius: "8px"
|
|||
|
|
}}
|
|||
|
|
>Личный кабинет</Button>
|
|||
|
|
</SectionWrapper>
|
|||
|
|
);
|
|||
|
|
}
|