200 lines
8.8 KiB
TypeScript
200 lines
8.8 KiB
TypeScript
import { useState } from "react";
|
||
import { Link, useLocation } from "react-router-dom";
|
||
import { Box, Button, List, ListItem, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||
import { useUserStore } from "@root/stores/user";
|
||
import { currencyFormatter } from "@root/utils/currencyFormatter";
|
||
import { cardShadow } from "@root/utils/theme";
|
||
import { AvatarButton } from "@frontend/kitui";
|
||
|
||
|
||
type MenuItem = {
|
||
name: string;
|
||
url: string;
|
||
subMenu?: MenuItem[];
|
||
};
|
||
|
||
const arrayMenu: MenuItem[] = [
|
||
{
|
||
name: "Тарифы",
|
||
url: "/tariffs",
|
||
subMenu: [
|
||
{ name: "Тарифы на время", url: "/tariffs/time" },
|
||
{ name: "Тарифы на объём", url: "/tariffs/volume" },
|
||
{ name: "Кастомный тариф", url: "/tariffconstructor" },
|
||
],
|
||
},
|
||
{ name: "Профиль", url: "/settings" },
|
||
{ name: "Вопросы и ответы", url: "/faq" },
|
||
{ name: "Корзина", url: "/cart" },
|
||
{ name: "Поддержка", url: "/support" },
|
||
{ name: "История", url: "/history" },
|
||
];
|
||
|
||
interface DialogMenuProps {
|
||
handleClose: () => void;
|
||
}
|
||
|
||
export default function DialogMenu({ handleClose }: DialogMenuProps) {
|
||
const [activeSubMenuIndex, setActiveSubMenuIndex] = useState<number>(-1);
|
||
const theme = useTheme();
|
||
const location = useLocation();
|
||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||
const user = useUserStore((state) => state.user);
|
||
const cash = useUserStore((state) => state.userAccount?.wallet.cash) ?? 0;
|
||
const initials = useUserStore(state => state.initials);
|
||
|
||
const closeDialogMenu = () => {
|
||
setActiveSubMenuIndex(-1);
|
||
|
||
handleClose();
|
||
};
|
||
|
||
const handleSubMenu = (index: number) => setActiveSubMenuIndex((activeIndex) => (activeIndex !== index ? index : -1));
|
||
|
||
|
||
return (
|
||
<Box sx={{ height: "100%", maxHeight: "calc(100vh - 51px)" }}>
|
||
<List
|
||
sx={{
|
||
maxWidth: "250px",
|
||
background: location.pathname === "/" ? "#333647" : "#FFFFFF",
|
||
height: "100%",
|
||
}}
|
||
>
|
||
<ListItem
|
||
sx={{
|
||
pl: 0,
|
||
pr: 0,
|
||
flexDirection: "column",
|
||
alignItems: isMobile ? "start" : "end",
|
||
}}
|
||
>
|
||
{arrayMenu.map(({ name, url, subMenu = [] }, index) => (
|
||
<Box sx={{ width: "100%" }} key={name + index}>
|
||
<Button
|
||
key={index}
|
||
component={Link}
|
||
to={url}
|
||
state={{ previousUrl: location.pathname }}
|
||
disableRipple
|
||
variant="text"
|
||
onClick={() => (!subMenu.length ? closeDialogMenu() : handleSubMenu(index))}
|
||
sx={{
|
||
padding: "10px 10px 10px 20px",
|
||
display: "block",
|
||
fontWeight: 500,
|
||
color: location.pathname === url ? "#7E2AEA" : location.pathname === "/" ? "white" : "black",
|
||
textTransform: "none",
|
||
fontSize: "16px",
|
||
borderRadius: 0,
|
||
"&:hover, &:active": {
|
||
color: "#7E2AEA",
|
||
background: index === activeSubMenuIndex ? theme.palette.background.default : "none",
|
||
},
|
||
}}
|
||
>
|
||
<Box>{name}</Box>
|
||
</Button>
|
||
{subMenu.length ? (
|
||
<Box
|
||
sx={{
|
||
backgroundColor: theme.palette.background.paper,
|
||
width: "100%",
|
||
boxShadow: !isTablet ? cardShadow : null,
|
||
}}
|
||
>
|
||
{index === activeSubMenuIndex &&
|
||
subMenu.map(({ name, url }) => (
|
||
<Link
|
||
key={name + url}
|
||
style={{
|
||
paddingLeft: "30px",
|
||
display: "block",
|
||
textDecoration: "none",
|
||
}}
|
||
to={url}
|
||
onClick={closeDialogMenu}
|
||
state={{ previousUrl: location.pathname }}
|
||
>
|
||
<Typography
|
||
variant="body2"
|
||
sx={{
|
||
padding: "12px",
|
||
whiteSpace: "nowrap",
|
||
fontWeight: 400,
|
||
color:
|
||
location.pathname === url ? "#7E2AEA" : location.pathname === "/" ? "white" : "black",
|
||
}}
|
||
>
|
||
{name}
|
||
</Typography>
|
||
</Link>
|
||
))}
|
||
</Box>
|
||
) : (
|
||
<></>
|
||
)}
|
||
</Box>
|
||
))}
|
||
</ListItem>
|
||
{location.pathname === "/" ? (
|
||
<Button
|
||
component={Link}
|
||
to={user ? "/tariffs" : "/signin"}
|
||
state={user ? undefined : { backgroundLocation: location }}
|
||
variant="outlined"
|
||
sx={{
|
||
width: "188px",
|
||
color: "white",
|
||
border: "1px solid white",
|
||
ml: "40px",
|
||
mt: "35px",
|
||
textTransform: "none",
|
||
fontWeight: "400",
|
||
fontSize: "18px",
|
||
lineHeight: "24px",
|
||
borderRadius: "8px",
|
||
padding: "8px 17px",
|
||
}}
|
||
>
|
||
Личный кабинет
|
||
</Button>
|
||
) : (
|
||
<Box
|
||
sx={{
|
||
width: "100%",
|
||
height: "72px",
|
||
background: "#F2F3F7",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
position: "absolute",
|
||
bottom: "0",
|
||
}}
|
||
>
|
||
<AvatarButton
|
||
component={Link}
|
||
to="/settings"
|
||
sx={{ ml: "27px" }}
|
||
>{initials}</AvatarButton>
|
||
<Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>
|
||
<Typography
|
||
sx={{
|
||
fontSize: "12px",
|
||
lineHeight: "14px",
|
||
color: theme.palette.gray.dark,
|
||
}}
|
||
>
|
||
Мой баланс
|
||
</Typography>
|
||
<Typography variant="body2" color={theme.palette.purple.main}>
|
||
{currencyFormatter.format(cash / 100)}
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
)}
|
||
</List>
|
||
</Box>
|
||
);
|
||
}
|