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 (
+
+ {links.map((e, i) => (
+
+
+
+
+ {e.element}
+
+
+
+
+
+ ))}
+
+ )
+}
+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 (
-
+
{
-
-
-
- {theme.direction === 'rtl' ? : }
-
-
-
-
-
- {links.map((e, i) => (
-
-
-
-
- {e.element}
-
-
-
-
-
-
- ))}
-
-
-
+ {!mobile ?
+
+
+
+
+
+
+
+ : null}
+ {sladeMobile ?
+
+
+
+
+
+
+ : null}
);
}