adminFront/src/pages/dashboard/Menu/index.tsx

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, 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;