frontPanel/src/pages/Landing/headerMobileLanding.tsx

import { useState } from "react";
import * as React from "react";
import {} from "react-router-dom";
import { useLocation, Link } from "react-router-dom";

import {
    useMediaQuery,
    useTheme,
    Button,
    Dialog,
    ListItem,
    AppBar,
    List,
    Toolbar,
    IconButton,
    Box,
    Slide,
} from "@mui/material";
import { TransitionProps } from "@mui/material/transitions";

import SectionStyled from "./SectionStyled";
import CloseIcon from "./images/icons/CloseIcon";
import MenuIcon from "./images/icons/MenuIcon";

import Logotip from "./images/icons/QuizLogo";
// import logotipBlack from "../Icons/Logo/black_logo_PenaHab.svg";
// import logotipBlackMobile from "../Icons/Logo/black_logo_PenaHab_mobile.svg";

const buttonMenu: { path: string; title: string }[] = [
    { path: "/", title: "Меню 1" },
    { path: "/", title: "Меню 2" },
    { path: "/", title: "Меню 3" },
    { path: "/", title: "Меню 4" },
    { path: "/", title: "Меню 5" },
    { path: "/", title: "Меню 6" },
    { path: "/", title: "Меню 7" },
    { path: "/", title: "Меню 8" },
];

interface Props {
    theme?: "dark" | "light";
    bgColor?: string;
}

const Transition = React.forwardRef(function Transition(
    props: TransitionProps & {
        children: React.ReactElement;
    },

    ref: React.Ref<unknown>
) {
    return <Slide direction={"left"} ref={ref} {...props} />;
});

const height = "80px";
export default function FullScreenDialog({
                                             theme = "dark",
                                             bgColor = "#F2F3F7",
                                         }: Props) {
    const [open, setOpen] = useState(false);
    const location = useLocation();
    const themeMUI = useTheme();
    const isMobile = useMediaQuery(themeMUI.breakpoints.down("md"));

    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    return (
        <>
            <SectionStyled
                tag="header"
                bg={bgColor}
                mwidth={"1200px"}
                sxsect={{
                    minHeight: isMobile? "50px" : {height},
                    position: "fixed",
                    zIndex: 11

                }}
                sxcont={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    svg: { color: "#000000" },
                    padding: isMobile ? 0 : "0 22px 0 40px"
                }}
            >
                <Box sx={{ bgcolor: "none", paddingTop: isMobile? "6px" : 0 }}>
                    <Logotip width={150}/>
                </Box>
                {!isMobile && (
                    <Button
                        // onClick={() => setIsContactFormOpen(true)}
                        disableRipple
                        sx={{
                            color: "black",
                            border: "1px solid black",
                            ml: "auto",
                            mr: "38px",
                            textTransform: "none",
                            fontWeight: "400",
                            fontSize: "18px",
                            lineHeight: "24px",
                            borderRadius: "8px",
                            padding: "8px 17px",
                            "&:hover": {
                                background: "rgba(126, 42, 234, 0.07)",
                                bgcolor: "#7E2AEA",
                            },
                        }}
                    >
                        Предрегистрация
                    </Button>
                )}

                <Button disableRipple variant="text" onClick={handleClickOpen}>
                    <MenuIcon />
                </Button>
                <Dialog
                    fullScreen
                    sx={{ width: isMobile ? "100%" : "320px", ml: "auto", height: "100%" }}
                    open={open}
                    onClose={handleClose}
                    TransitionComponent={Transition}
                >
                    <AppBar
                        sx={{
                            position: "relative",
                            background: theme === "dark" ? "#252734" : "#F2F3F7",
                            boxShadow: "none",
                            height: isMobile ? "66px" : "100px",
                        }}
                    >
                        <Toolbar
                            sx={{
                                display: "flex",
                                justifyContent: "space-between",
                                svg: { color: theme === "dark" ? "#ffffff" : "#000000" },
                                pt: "12px",
                            }}
                        >
                            {isMobile && (
                                <Logotip width={150}/>
                            )}
                            <IconButton
                                sx={{ ml: "auto" }}
                                edge="start"
                                color="inherit"
                                onClick={handleClose}
                                aria-label="close"
                            >
                                <CloseIcon />
                            </IconButton>
                        </Toolbar>
                    </AppBar>
                    <List
                        sx={{
                            background: theme === "dark" ? "#252734" : "#F2F3F7",
                            height: "100vh",
                            p: "0",
                        }}
                    >
                        <ListItem
                            sx={{
                                pl: "40px",
                                flexDirection: "column",
                                alignItems: isMobile ? "stretch" : "end",
                            }}
                        >
                            {buttonMenu.map(({ path, title }) => (
                                <Link
                                    key={path}
                                    to={path}
                                    style={{
                                        textDecoration: "none",
                                        height: "20px",
                                        marginBottom: "25px",
                                    }}
                                >
                                    <Button
                                        disableRipple
                                        variant="text"
                                        sx={{
                                            color:
                                                location.pathname === path
                                                    ? "#7E2AEA"
                                                    : theme === "dark"
                                                        ? "white"
                                                        : "black",
                                            height: "20px",
                                            textTransform: "none",
                                            fontSize: "16px",
                                            "&:hover": {
                                                background: "none",
                                                color: "#7E2AEA",
                                            },
                                        }}
                                    >
                                        {title}
                                    </Button>
                                </Link>
                            ))}
                        </ListItem>
                        {isMobile ? (
                            <Button
                                // onClick={() => setIsContactFormOpen(true)}
                                variant="outlined"
                                sx={{
                                    position: "absolute",
                                    bottom: 0,
                                    mb: "60px",
                                    width: "188px",
                                    color: theme === "dark" ? "white" : "black",
                                    border: "1px solid black",
                                    ml: "40px",
                                    mt: "180px",
                                    textTransform: "none",
                                    fontWeight: "400",
                                    fontSize: "18px",
                                    lineHeight: "24px",
                                    borderRadius: "8px",
                                    padding: "8px 17px",
                                }}
                            >
                                Предрегистрация
                            </Button>
                        ) : (
                            <Box
                                sx={{
                                    position: "absolute",
                                    right: "40px",
                                    bottom: "60px",
                                }}
                            >
                                <Logotip width={150}/>
                            </Box>
                        )}
                    </List>
                </Dialog>
            </SectionStyled>
            <Box sx={{height: isMobile ? "50px" : {height}}} />
        </>
    );
}