From 3176fdb21c379d2ffc8a73e4544801c11157c2fa Mon Sep 17 00:00:00 2001
From: Tamara <tomka-zel@yandex.ru>
Date: Tue, 10 Jan 2023 05:27:03 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B0=D0=B4=D0=B0=D0=BF=D1=82=D0=B0=D1=86?=
 =?UTF-8?q?=D0=B8=D1=8F=20=D0=B4=D0=BB=D1=8F=20=D0=BC=D0=B5=D0=BD=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/dashboard/Menu/index.tsx | 146 +++++++++++++++++------------
 1 file changed, 85 insertions(+), 61 deletions(-)

diff --git a/src/pages/dashboard/Menu/index.tsx b/src/pages/dashboard/Menu/index.tsx
index 2e0a003..f2262e5 100644
--- a/src/pages/dashboard/Menu/index.tsx
+++ b/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 matches = useMediaQuery('(min-width:600px)');
-    React.useEffect(() => {
-        if (matches) {
-            handleDrawerOpen()
-        } else {
-            handleDrawerClose()
-        }
-    }, [matches])
+const Navigation = (props:any) => {
+    return (
+        <List
+            sx={{
+                background: '#2f3339'
+            }}
+        >
+            {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>
+    )
+}
 
 
+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}>
-          <DrawerHeader style={{minHeight: '86px',}}>
-            <IconButton onClick={handleDrawerClose}>
-              {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
-            </IconButton>
-          </DrawerHeader>
-          <Divider />
-          <List
-              sx={{
-                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>
+          {!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>
   );
 }