frontPanel/src/ui_kit/Sidebar.tsx

import { useState } from "react";
import { Container, Box, useTheme, List, Typography, IconButton } from "@mui/material";

import MegaphoneIcon from "../components/icons/MegaphoneIcon";
import QuestionIcon from "../components/icons/QuestionIcon";
import ChartPieIcon from "../components/icons/ChartPieIcon";
import ContactBookIcon from "../components/icons/ContactBookIcon";
import FlowArrowIcon from "../components/icons/FlowArrowIcon";
import CollapseMenuIcon from "../components/icons/CollapseMenuIcon";
import TagIcon from "../components/icons/TagIcon";
import PencilCircleIcon from "../components/icons/PencilCircleIcon";
import PuzzlePieceIcon from "../components/icons/PuzzlePieceIcon";
import GearIcon from "../components/icons/GearIcon";
import LayoutIcon from "../components/icons/LayoutIcon";
import MenuItem from "../components/CreateQuiz/MenuItem";

const createQuizMenuItems = [
    [LayoutIcon, "Стартовая страница"],
    [QuestionIcon, "Вопросы"],
    [ChartPieIcon, "Результаты"],
    [ContactBookIcon, "Форма контактов"],
    [FlowArrowIcon, "Установка квиза"],
    [MegaphoneIcon, "Запуск рекламы"],
] as const;

const quizSettingsMenuItems = [
    [TagIcon, "Дополнения"],
    [PencilCircleIcon, "Дизайн"],
    [PuzzlePieceIcon, "Интеграции"],
    [GearIcon, "Настройки"],
] as const;

export default function Sidebar() {
    const theme = useTheme();
    const [isMenuCollapsed, setIsMenuCollapsed] = useState(false);
    const [activeMenuItemIndex, setActiveMenuItemIndex] = useState<number>(0);
    const [progress, setProgress] = useState<number>(1 / 6);

    const handleMenuCollapseToggle = () => setIsMenuCollapsed(prev => !prev);
    return (

        <Box
                sx={{
                    backgroundColor: theme.palette.lightPurple.main,
                    minWidth: isMenuCollapsed ? "80px" : "230px",
                    width: isMenuCollapsed ? "80px" : "230px",
                    // height: '100vh',
                    display: "flex",
                    flexDirection: "column",
                    py: "19px",
                    transitionProperty: "width, min-width",
                    transitionDuration: "200ms",
                    overflow: "hidden",
                    whiteSpace: "nowrap",
                }}
            >
                <Box
                    sx={{
                        display: "flex",
                        pl: isMenuCollapsed ? undefined : "16px",
                        pr: isMenuCollapsed ? undefined : "8px",
                        mb: isMenuCollapsed ? "5px" : undefined,
                        alignItems: "center",
                        justifyContent: isMenuCollapsed ? "center" : undefined,
                    }}
                >
                    {!isMenuCollapsed &&
                        <Typography
                            sx={{
                                fontSize: "14px",
                                lineHeight: "20px",
                                fontWeight: 500,
                                color: theme.palette.grey2.main,
                            }}
                        >Создание квиза</Typography>
                    }
                    <IconButton onClick={handleMenuCollapseToggle} sx={{ ml: isMenuCollapsed ? undefined : "auto" }}>
                        <CollapseMenuIcon height="16px" width="16px" color={theme.palette.grey2.main} transform={isMenuCollapsed ? "rotate(180deg)" : ""} />
                    </IconButton>
                </Box>
                <List disablePadding>
                    {createQuizMenuItems.map((menuItem, index) => {
                        const Icon = menuItem[0];
                        return (
                            <MenuItem
                                onClick={() => setActiveMenuItemIndex(index)}
                                key={menuItem[1]}
                                text={menuItem[1]}
                                isCollapsed={isMenuCollapsed}
                                isActive={activeMenuItemIndex === index}
                                icon={<Icon
                                    color={activeMenuItemIndex === index ?
                                        theme.palette.brightPurple.main
                                        :
                                        isMenuCollapsed ?
                                            "white"
                                            :
                                            theme.palette.grey2.main
                                    }
                                    height={isMenuCollapsed ? "35px" : "24px"}
                                    width={isMenuCollapsed ? "35px" : "24px"}
                                />}
                            />
                        );
                    })}
                </List>
                {!isMenuCollapsed &&
                    <Typography
                        sx={{
                            px: "16px",
                            mt: "16px",
                            mb: "11px",
                            fontSize: "14px",
                            lineHeight: "20px",
                            fontWeight: 500,
                            color: theme.palette.grey2.main,
                        }}
                    >Настройки квиза</Typography>
                }
                <List disablePadding>
                    {quizSettingsMenuItems.map((menuItem, index) => {
                        const Icon = menuItem[0];
                        const totalIndex = index + createQuizMenuItems.length;
                        const isActive = activeMenuItemIndex === totalIndex;
                        return (
                            <MenuItem
                                onClick={() => setActiveMenuItemIndex(totalIndex)}
                                key={menuItem[1]}
                                text={menuItem[1]}
                                isActive={isActive}
                                isCollapsed={isMenuCollapsed}
                                icon={<Icon
                                    color={isActive ?
                                        theme.palette.brightPurple.main
                                        :
                                        isMenuCollapsed ?
                                            "white"
                                            :
                                            theme.palette.grey2.main
                                    }
                                    height={isMenuCollapsed ? "35px" : "24px"}
                                    width={isMenuCollapsed ? "35px" : "24px"}
                                />}
                            />
                        );
                    })}
                </List>
            </Box>

    )
}