swappable drawer pwa

src/Components/Navigation/MenuMovil.jsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
 
-import Drawer from '@mui/material/Drawer';
 import { MainListItems, SecondaryListItems} from './listItems'
 import { List, Divider } from '@mui/material';
 import { Logout } from '@mui/icons-material/';
 import { Nav } from 'react-bootstrap';
-import { ListItem, ListItemIcon,ListItemText} from '@mui/material/'
+import { 
+    ListItem, ListItemIcon,ListItemText,
+    SwipeableDrawer
+} from '@mui/material/'
 import useAuth from '../../Auth/useAuth'
 
 export function MenuMovil(props) {
@@ -15,7 +17,12 @@ export function MenuMovil(props) {
 
     return (
         <React.Fragment >
-            <Drawer anchor="left" open={anchor} sx={{ width : 10 }} >
+            <SwipeableDrawer anchor="left" open={anchor} 
+                sx={{
+                    '& .MuiDrawer-paper': {
+                        width : '50%'
+                    }
+                }}>
                 <List style={{ paddingTop : 64 }}>
                     <MainListItems AppBarVisible={anchor} setAppBarVisible={() => console.log('cerrar la vision')} />
                 </List>
@@ -36,7 +43,7 @@ export function MenuMovil(props) {
                         </ListItem>
                     </Nav>
                 </List>
-            </Drawer>
+            </SwipeableDrawer>
         </React.Fragment>
     );
 }