162 lines
6.3 KiB
TypeScript
Executable File
162 lines
6.3 KiB
TypeScript
Executable File
import CollapseMenuIcon from "@icons/CollapseMenuIcon";
|
||
import GearIcon from "@icons/GearIcon";
|
||
import PencilCircleIcon from "@icons/PencilCircleIcon";
|
||
import PuzzlePieceIcon from "@icons/PuzzlePieceIcon";
|
||
import TagIcon from "@icons/TagIcon";
|
||
import { quizSetupSteps } from "@model/quizSettings";
|
||
import {
|
||
Box,
|
||
IconButton,
|
||
List,
|
||
Typography,
|
||
useTheme
|
||
} from "@mui/material";
|
||
import { setCurrentStep } from "@root/quizes/actions";
|
||
import { useQuizStore } from "@root/quizes/store";
|
||
import { useState } from "react";
|
||
import MenuItem from "./MenuItem";
|
||
|
||
|
||
const quizSettingsMenuItems = [
|
||
[TagIcon, "Дополнения"],
|
||
[PencilCircleIcon, "Дизайн"],
|
||
[PuzzlePieceIcon, "Интеграции"],
|
||
[GearIcon, "Настройки"],
|
||
] as const;
|
||
|
||
export default function Sidebar() {
|
||
const theme = useTheme();
|
||
const [isMenuCollapsed, setIsMenuCollapsed] = useState(false);
|
||
const currentStep = useQuizStore(state => state.currentStep);
|
||
|
||
const handleMenuCollapseToggle = () => setIsMenuCollapsed((prev) => !prev);
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
backgroundColor: theme.palette.lightPurple.main,
|
||
minWidth: isMenuCollapsed ? "80px" : "230px",
|
||
width: isMenuCollapsed ? "80px" : "230px",
|
||
height: "calc(100vh - 80px)",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
py: "19px",
|
||
transitionProperty: "width, min-width",
|
||
transitionDuration: "200ms",
|
||
overflow: "hidden",
|
||
whiteSpace: "nowrap",
|
||
boxSizing: "border-box",
|
||
zIndex: 1
|
||
}}
|
||
>
|
||
<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>
|
||
{quizSetupSteps.map((menuItem, index) => {
|
||
const Icon = menuItem.sidebarIcon;
|
||
|
||
return (
|
||
<MenuItem
|
||
onClick={() => setCurrentStep(index)}
|
||
key={index}
|
||
text={menuItem.sidebarText}
|
||
isCollapsed={isMenuCollapsed}
|
||
isActive={currentStep === index}
|
||
icon={
|
||
<Icon
|
||
color={
|
||
currentStep === 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: "6px",
|
||
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 + quizSetupSteps.length;
|
||
const isActive = currentStep === totalIndex + 1;
|
||
|
||
return (
|
||
<MenuItem
|
||
onClick={() => null}
|
||
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>
|
||
);
|
||
}
|