адаптация для меню

src/pages/dashboard/Menu/index.tsx

@@ -27,6 +27,7 @@ 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;
 
@@ -112,34 +113,77 @@ const links: {path: string; element: JSX.Element; title: string} [] =[
 ]
 
 
-const Menu: React.FC = () =>  {
+const Navigation = (props:any) => {
-    const matches = useMediaQuery('(min-width:600px)');
+    return (
-    React.useEffect(() => {
+        <List
-        if (matches) {
+            sx={{
-            handleDrawerOpen()
+                background: '#2f3339'
-        } else {
+            }}
-            handleDrawerClose()
+        >
+            {links.map((e, i) => (
+                <ListItem   disablePadding sx={{ display: 'block' }}>
+                    <Link key={i} to={e.path} style={{textDecoration: 'none'}}>
+                        <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>
+    )
 }
-    }, [matches])
 
 
+const Menu: React.FC = () =>  {
+    const tablet = useMediaQuery('(max-width:600px)');
+
+    const mobile = useMediaQuery('(max-width:340px)');
+
     const theme = useTheme();
-    const [open, setOpen] = React.useState(true);
+    const [open, setOpen] = React.useState(tablet? false : true);
 
     const handleDrawerOpen = () => {
-      setOpen(true);
+      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 position="fixed" open={open}>
+        <AppBar  open={open}>
           <Toolbar
               sx={{
                   background: '#2f3339',
@@ -163,56 +207,36 @@ const Menu: React.FC = () =>  {
             <Header />
           </Toolbar>
         </AppBar>
-        <Drawer variant="permanent" open={open}>
+          {!mobile ? <Drawer variant="permanent" open={open}>
               <DrawerHeader style={{minHeight: '86px',}}>
-            <IconButton onClick={handleDrawerClose}>
+                  <IconButton onClick={handleDrawerClose} sx={{color: "#eaba5b"}}>
-              {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+                      <ChevronLeftIcon />
                   </IconButton>
               </DrawerHeader>
               <Divider />
-          <List
+              <Navigation visible={open}/>
-              sx={{
+        </Drawer> : null}
-                background: '#2f3339'
-              }}
-          >
-
-              {links.map((e, i) => (
-                  <ListItem   disablePadding sx={{ display: 'block' }}>
-                    <Link key={i} to={e.path} style={{textDecoration: 'none'}}>
-                    <ListItemButton
-                        sx={{
-                          minHeight: 48,
-                          height: '50px',
-                          justifyContent: open ? 'initial' : 'center',
-                          px: 2.5,
-                          margin: '20px 0'
-                        }}
-                    >
-                      <ListItemIcon
-                          sx={{
-                            minWidth: 0,
-                            mr: open ? 3 : 'auto',
-                            justifyContent: 'center',
-                            color: '#eaba5b',
-                            transform: 'scale(1.2)'
-                          }}
-                      >
-                        {e.element}
-                      </ListItemIcon>
-                      <ListItemText primary={e.title}
-                                    sx={{
-                                      opacity: open ? 1 : 0,
-                                      color: '#eaba5b',
-                                    }} />
-
-                    </ListItemButton>
-                    </Link>
-                  </ListItem>
-              ))}
-
-          </List>
-        </Drawer>
       </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>
   );
 }