250 lines
9.7 KiB
TypeScript
250 lines
9.7 KiB
TypeScript
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}}} />
|
||
</>
|
||
);
|
||
}
|