frontPanel/src/pages/startPage/Sidebar/SidebarMobile.tsx

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>
  );
};