adminFront/src/pages/dashboard/Menu/index.tsx
2023-08-31 21:00:07 +03:00

265 lines
8.4 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import * as React from "react";
import { Box } from "@mui/material";
import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
import BathtubOutlinedIcon from "@mui/icons-material/BathtubOutlined";
import AddPhotoAlternateOutlinedIcon from "@mui/icons-material/AddPhotoAlternateOutlined";
import NaturePeopleOutlinedIcon from "@mui/icons-material/NaturePeopleOutlined";
import SettingsIcon from "@mui/icons-material/Settings";
import CameraIcon from "@mui/icons-material/Camera";
import HeadsetMicOutlinedIcon from "@mui/icons-material/HeadsetMicOutlined";
import theme from "../../../theme";
import CssBaseline from "@mui/material/CssBaseline";
import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import Divider from "@mui/material/Divider";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import { CSSObject, styled, Theme, useTheme } from "@mui/material/styles";
import MuiDrawer from "@mui/material/Drawer";
import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
import Header from "../Header/index";
import { Link } from "react-router-dom";
import useMediaQuery from "@mui/material/useMediaQuery";
import Paper from "@mui/material/Paper";
const drawerWidth = 240;
const openedMixin = (theme: Theme): CSSObject => ({
width: drawerWidth,
background: "#2f3339",
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
overflowX: "hidden",
});
const closedMixin = (theme: Theme): CSSObject => ({
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
overflowX: "hidden",
width: `calc(${theme.spacing(7)} + 1px)`,
background: "#2f3339",
// marginTop: '20px',
[theme.breakpoints.up("sm")]: {
width: `calc(${theme.spacing(8)} + 1px)`,
},
});
const DrawerHeader = styled("div")(({ theme }) => ({
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: theme.spacing(0, 1),
...theme.mixins.toolbar,
}));
interface AppBarProps extends MuiAppBarProps {
open?: boolean;
}
const AppBar = styled(MuiAppBar, {
shouldForwardProp: (prop) => prop !== "open",
})<AppBarProps>(({ theme, open }) => ({
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
...(open && {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
}),
}));
const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({
width: drawerWidth,
flexShrink: 0,
boxSizing: "border-box",
...(open && {
...openedMixin(theme),
"& .MuiDrawer-paper": openedMixin(theme),
}),
...(!open && {
...closedMixin(theme),
"& .MuiDrawer-paper": closedMixin(theme),
}),
}));
const links: { path: string; element: JSX.Element; title: string; className: string }[] = [
{ path: "/users", element: <PersonOutlineOutlinedIcon />, title: "Информация о проекте", className: "menu" },
{ path: "/entities", element: <SettingsOutlinedIcon />, title: "Юридические лица", className: "menu" },
{ path: "/tariffs", element: <BathtubOutlinedIcon />, title: "Тарифы", className: "menu" },
{ path: "/discounts", element: <AddPhotoAlternateOutlinedIcon />, title: "Скидки", className: "menu" },
{ path: "/promocode", element: <NaturePeopleOutlinedIcon />, title: "Промокод", className: "menu" },
{ path: "/settingRoles", element: <SettingsIcon />, title: "Настройки", className: "menu" },
{ path: "/jjj", element: <CameraIcon />, title: "Камера", className: "menu" },
{ path: "/support", element: <HeadsetMicOutlinedIcon />, title: "Служба поддержки", className: "menu" },
];
interface Props {
visible: boolean;
SladeMobileHC?: () => void;
}
const Navigation = (props: Props) => {
return (
<List
sx={{
background: "#2f3339",
}}
>
{links.map((e, index) => (
<ListItem key={index} disablePadding sx={{ display: "block" }}>
<Link
to={e.path}
style={{
textDecoration: "none",
}}
className={e.className}
>
<ListItemButton
disableGutters
disableRipple
onClick={props.SladeMobileHC}
sx={{
minHeight: 48,
height: "50px",
justifyContent: props.visible ? "initial" : "center",
px: 2.5,
margin: "20px 0",
"&:active": {
background: "gray",
},
}}
>
<ListItemIcon
sx={{
minWidth: 0,
mr: props.visible ? 3 : "auto",
justifyContent: "center",
color: "#eaba5b",
transform: "scale(1.2)",
}}
>
{e.element}
</ListItemIcon>
<ListItemText
primary={e.title}
sx={{
opacity: props.visible ? 1 : 0,
color: "#eaba5b",
}}
/>
</ListItemButton>
</Link>
</ListItem>
))}
</List>
);
};
const Menu: React.FC = () => {
const tablet = useMediaQuery("(max-width:600px)");
const mobile = useMediaQuery("(max-width:340px)");
const theme = useTheme();
const [open, setOpen] = React.useState(tablet ? false : true);
const handleDrawerOpen = () => {
if (!mobile) {
setOpen(true);
} else {
SladeMobileHC();
}
};
const handleDrawerClose = () => {
setOpen(false);
};
const [sladeMobile, setSladeMobile] = React.useState(false);
const SladeMobileHC = () => {
if (mobile) {
setSladeMobile((old) => !old);
}
};
return (
<React.Fragment>
<Box sx={{ display: "flex" }}>
<CssBaseline />
<AppBar open={open}>
<Toolbar
sx={{
background: "#2f3339",
borderBottom: "1px solid",
borderColor: "#45494c",
}}
>
<IconButton
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
sx={{
marginRight: 5,
...(open && { display: "none" }),
color: "#eaba5b",
background: "#2f3339",
}}
>
<MenuIcon />
</IconButton>
<Header />
</Toolbar>
</AppBar>
{!mobile ? (
<Drawer variant="permanent" open={open}>
<DrawerHeader style={{ minHeight: "86px" }}>
<IconButton onClick={handleDrawerClose} sx={{ color: "#eaba5b" }}>
<ChevronLeftIcon />
</IconButton>
</DrawerHeader>
<Divider />
<Navigation visible={open} />
</Drawer>
) : null}
</Box>
{sladeMobile ? (
<Paper
sx={{
position: "absolute",
width: "100%",
background: "#2f3339",
zIndex: theme.zIndex.drawer + 3,
}}
>
<Box sx={{ display: "flex", justifyContent: "end", padding: "10px" }}>
<IconButton onClick={SladeMobileHC} sx={{ color: "#eaba5b" }}>
<ChevronLeftIcon />
</IconButton>
</Box>
<Divider />
<Navigation visible={true} SladeMobileHC={SladeMobileHC} />
</Paper>
) : null}
</React.Fragment>
);
};
export default Menu;