249 lines
8.1 KiB
TypeScript
249 lines
8.1 KiB
TypeScript
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" },
|
||
];
|
||
|
||
const Navigation = (props: any) => {
|
||
return (
|
||
<List
|
||
sx={{
|
||
background: "#2f3339",
|
||
}}
|
||
>
|
||
{links.map((e, i) => (
|
||
<ListItem key={i} disablePadding sx={{ display: "block" }}>
|
||
<Link to={e.path} style={{ textDecoration: "none" }} className={e.className}>
|
||
<ListItemButton
|
||
onClick={props.SladeMobileHC}
|
||
sx={{
|
||
minHeight: 48,
|
||
height: "50px",
|
||
justifyContent: props.visible ? "initial" : "center",
|
||
px: 2.5,
|
||
margin: "20px 0",
|
||
}}
|
||
>
|
||
<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;
|