swappeable fixes in movil device

src/Components/Dashboard.js

@@ -27,21 +27,20 @@ function DashboardContent() {
 
     const [open, setOpen] = React.useState(false);
     const isMovil = Size('(min-width:770px)');
-
-    const toggleDrawer = () => setOpen(!open);
     const auth = useAuth();
     const navigate = useNavigate()
 
+    const toggleDrawer = () => setOpen(!open);
     const [anchorEl, setAnchorEl] = React.useState(null);
     const open_profile = Boolean(anchorEl);
     const handleClick = (event) => setAnchorEl(event.currentTarget);
     const handleClose = () => setAnchorEl(null)
 
     const [anchorElMovil, setAnchorElMov] = React.useState(false);
-
-    const MenuResponsive = ()  => {
+    const MenuResponsive = () => {
+        console.log(anchorElMovil)
         setAnchorElMov(!anchorElMovil);
-    } 
+    }
 
     const CerrarSession = () => {
         console.log('cerrando session')
@@ -51,11 +50,16 @@ function DashboardContent() {
 
     return (
         <ThemeProvider theme={mdTheme}>
-            <MenuMovil anchor={anchorElMovil}/>
+
+            <MenuMovil 
+                anchor={anchorElMovil}
+                control={setAnchorElMov} />
+
             <Box sx={{ display: 'flex' }}>
                 <CssBaseline/>
                 <AppBar style={{ backgroundColor : '#fff', boxShadow : 'None' }} position="absolute" open={ !isMovil ? open : false}>
                     <Toolbar sx={{ pr: '24px' ,  borderBottom : "1px solid #ec5e69"}} >
+
                         {/* boton para activar navegacion */}
                         <IconButton 
                             edge="start" 
@@ -69,13 +73,16 @@ function DashboardContent() {
                                 color: "#fff"
                             }}/>
                         </IconButton>
+
                         <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
                             {
                             !isMovil && open ? (
                                 <React.Fragment>
+
                                     <IconButton onClick={toggleDrawer}>
                                         <MenuIcon />
                                     </IconButton>
+
                                     <IconButton onClick={ (event) =>  event.target.requestFullscreen() }>
                                         <FullscreenIcon style={{ paddinLeft : 15 }}/>
                                     </IconButton>

src/Components/Navigation/MenuMovil.jsx

@@ -12,15 +12,20 @@ import useAuth from '../../Auth/useAuth'
 
 export function MenuMovil(props) {
 
-    let { anchor } = props;
+    let { anchor, control } = props;
     const auth = useAuth();
 
     return (
         <React.Fragment >
-            <SwipeableDrawer anchor="left" open={anchor} 
+            <SwipeableDrawer 
+                disableBackdropTransition={true}
+                anchor="left" 
+                open={anchor} 
+                onOpen={() => control(true)}
+                onClose={() => control(false)}
                 sx={{
                     '& .MuiDrawer-paper': {
-                        width : '50%'
+                        width : '67%'
                     }
                 }}>
                 <List style={{ paddingTop : 64 }}>