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: '/kkk', 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;