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

import BackArrowIcon from "@icons/BackArrowIcon";
import { People } from "@mui/icons-material";
import { Box, Typography } from "@mui/material";
import { FC } from "react";
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";

interface Iprops {
  open: boolean;
}

export const SidebarMobile: FC<Iprops> = ({ open }) => (
  <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: "center", display: "flex", marginTop: "20px", flexWrap: "wrap", gap: "5px" }}
    >
      <Box
        sx={{
          cursor: "pointer",
          width: "44px",
          height: "44px",
          background: "#262835",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          borderRadius: "8px",
        }}
      >
        <Pencil style={{ color: "#974BFA", fontSize: "24px" }} />
      </Box>

      <Box
        sx={{
          cursor: "pointer",
          width: "44px",
          height: "44px",
          background: "#262835",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          borderRadius: "8px",
        }}
      >
        <People style={{ color: "#974BFA", fontSize: "24px" }} />
      </Box>

      <Box
        sx={{
          cursor: "pointer",
          width: "44px",
          height: "44px",
          background: "#262835",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          borderRadius: "8px",
        }}
      >
        <ChartLineUp style={{ color: "#974BFA", fontSize: "24px" }} />
      </Box>

      <Box
        sx={{
          cursor: "pointer",
          width: "44px",
          height: "44px",
          background: "#262835",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          borderRadius: "8px",
        }}
      >
        <ReturnTime style={{ color: "#974BFA", fontSize: "24px" }} />
      </Box>

      <Box
        sx={{
          cursor: "pointer",
          width: "44px",
          height: "44px",
          background: "#262835",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          borderRadius: "8px",
        }}
      >
        <Question style={{ color: "#974BFA", fontSize: "24px" }} />
      </Box>

      <Box
        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>
  </Box>
);