134 lines
4.0 KiB
TypeScript
134 lines
4.0 KiB
TypeScript
import { FC, useState } from "react";
|
||
import {Box, Popper, Typography} from "@mui/material";
|
||
import { People } from "@mui/icons-material";
|
||
|
||
import { SidebarModal } from "./SidebarModal";
|
||
|
||
import BackArrowIcon from "@icons/BackArrowIcon";
|
||
import { ChartLineUp } from "./icons/ChartLineUp";
|
||
import { ReturnTime } from "./icons/ReturnTime";
|
||
import { Question } from "./icons/Question";
|
||
import { Settings } from "./icons/Settings";
|
||
import { Pencil } from "./icons/Pencil";
|
||
import { ArrowDown } from "./icons/ArrowDown";
|
||
import Sidebar from "@ui_kit/Sidebar";
|
||
|
||
interface Iprops {
|
||
open: boolean;
|
||
changePage: (step: number) => void;
|
||
}
|
||
|
||
const quizSetupSteps = [
|
||
{ sidebarIcon: <Pencil style={{ color: "#974BFA", fontSize: "24px" }} /> },
|
||
{ sidebarIcon: <People style={{ color: "#974BFA", fontSize: "24px" }} /> },
|
||
{
|
||
sidebarIcon: <ChartLineUp style={{ color: "#974BFA", fontSize: "24px" }} />,
|
||
},
|
||
{
|
||
sidebarIcon: <ReturnTime style={{ color: "#974BFA", fontSize: "24px" }} />,
|
||
},
|
||
{ sidebarIcon: <Question style={{ color: "#974BFA", fontSize: "24px" }} /> },
|
||
] as const;
|
||
|
||
export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => {
|
||
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
||
|
||
const handleClick = (event) => {
|
||
setAnchorEl(anchorEl ? null : event.currentTarget);
|
||
};
|
||
|
||
const openPopper = Boolean(anchorEl);
|
||
const id = openPopper ? 'simple-popper' : undefined;
|
||
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
display: open ? "block" : "none",
|
||
minHeight: "134px",
|
||
padding: "20px 16px 16px 16px",
|
||
background: "#333647",
|
||
borderTop: "1px solid #9A9AAF",
|
||
borderBottomLeftRadius: "8px",
|
||
borderBottomRightRadius: "8px",
|
||
transitionDuration: "200ms",
|
||
}}
|
||
>
|
||
<Box sx={{ display: "flex", alignItems: "center", position: "relative" }}>
|
||
<BackArrowIcon color="white" />
|
||
|
||
<Box sx={{ ml: "15px", display: "flex", alignItems: "end" }}>
|
||
<Box>
|
||
<Typography sx={{ fontSize: "12px", color: "#9A9AAF" }}>
|
||
Название
|
||
</Typography>
|
||
<Typography
|
||
sx={{ color: "#FFF", fontSize: "18px", fontWeight: "500" }}
|
||
>
|
||
Название проекта
|
||
</Typography>
|
||
</Box>
|
||
<Pencil
|
||
style={{
|
||
position: "absolute",
|
||
right: "0",
|
||
color: "white",
|
||
fontSize: "24px",
|
||
}}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
width: "100%",
|
||
justifyContent: "end",
|
||
display: "flex",
|
||
marginTop: "20px",
|
||
flexWrap: "wrap",
|
||
gap: "5px",
|
||
}}
|
||
>
|
||
{/*{quizSetupSteps.map(({ sidebarIcon }, index) => (*/}
|
||
{/* <Box*/}
|
||
{/* onClick={() => changePage(index)}*/}
|
||
{/* sx={{*/}
|
||
{/* cursor: "pointer",*/}
|
||
{/* width: "44px",*/}
|
||
{/* height: "44px",*/}
|
||
{/* background: "#262835",*/}
|
||
{/* display: "flex",*/}
|
||
{/* justifyContent: "center",*/}
|
||
{/* alignItems: "center",*/}
|
||
{/* borderRadius: "8px",*/}
|
||
{/* }}*/}
|
||
{/* >*/}
|
||
{/* {sidebarIcon}*/}
|
||
{/* </Box>*/}
|
||
{/*))}*/}
|
||
<Box
|
||
aria-describedby={id}
|
||
onClick={handleClick}
|
||
sx={{
|
||
px: "10px",
|
||
width: "70px",
|
||
height: "44px",
|
||
background: "#262835",
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
borderRadius: "8px",
|
||
border: "1px solid #FFFFFF66",
|
||
marginLeft: "28px",
|
||
}}
|
||
>
|
||
<Settings
|
||
style={{ color: "#974BFA", fontSize: "24px", marginLeft: "10px" }}
|
||
/>
|
||
<ArrowDown style={{ color: "#F2F3F7" }} />
|
||
</Box>
|
||
</Box>
|
||
<SidebarModal open={openPopper} anchorEl={anchorEl} handleClick={handleClick} id={id} changePage={changePage} />
|
||
</Box>
|
||
);
|
||
};
|