front-hub/src/components/Navbar/NavbarFull.tsx

import { Box, Button, Container, IconButton, Typography, useTheme } from "@mui/material";
import LogoutIcon from "../icons/LogoutIcon";
import NavMenuItem from "../NavMenuItem";
import PenaLogo from "../PenaLogo";
import SectionWrapper from "../SectionWrapper";
import WalletIcon from "../icons/WalletIcon";
import CustomAvatar from "./Avatar";
import { useNavigate } from "react-router-dom";
import { apiRequestHandler } from "../../utils/api/apiRequestHandler";


interface Props {
    isLoggedIn: boolean;
}

export default function NavbarFull({ isLoggedIn }: Props) {
    const theme = useTheme();
    const navigate = useNavigate();

    async function handleLogoutClick() {
        await apiRequestHandler.logout();
        navigate("/");
    }

    return isLoggedIn ? (
        <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="Меню 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={{ 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
                    onClick={handleLogoutClick}
                    sx={{ ml: "20px", bgcolor: "#F2F3F7", borderRadius: "6px", height: "36px", width: "36px" }}
                >
                    <LogoutIcon />
                </IconButton>
            </Box>
        </Container>
    ) : (
        <SectionWrapper
            component="nav"
            maxWidth="lg"
            outerContainerSx={{
                backgroundColor: theme.palette.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>
    );
}