test menu movil responsive

src/App.css

 
 .w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
 
+#mySidebar{
+    z-index : 999;
+}
+

src/Components/Dashboard.js

 import { 
     Menu,MenuItem,Container,Avatar, Badge,IconButton,Divider,
     Typography, List, Toolbar, AppBar as MuiAppBar, Box, Drawer as MuiDrawer,
-    CssBaseline
+    CssBaseline, 
 } from '@mui/material'
 
 import {
     const navigate = useNavigate()
 
     const [anchorEl, setAnchorEl] = React.useState(null);
+
     const open_profile = Boolean(anchorEl);
     const handleClick = (event) => setAnchorEl(event.currentTarget);
     const handleClose = () => setAnchorEl(null)
     };
 
     const MenuResponsive = ()  => {
-        // console.log('click')
-        // setAnchorElMov(elRef.current);
-        // setAnchorElMov(elRef.current);
         setAnchorElMov(!anchorElMovil);
     } 
 
 
 
             <Box sx={{ display: 'flex' }}>
-                <CssBaseline />
+                <CssBaseline/>
                 <AppBar style={{ backgroundColor : '#fff', boxShadow : 'None' }} position="absolute" open={useCheckMobileScreen() ? false : open}>
 
                     <Toolbar sx={{ pr: '24px' ,  borderBottom : "1px solid #ec5e69"}} >
                     </List>
                 </Drawer>
                 <Container maxWidth="lg" sx={{ mt: 2 , mb: 2 }}>
-                    <Outlet/>
-                    <Footer/>
+                    <Outlet  />
+                    <Footer />
                 </Container>
             </Box>
         </ThemeProvider>

src/Components/MenuMovil.js

 } from '@mui/icons-material/'
 
 
-import { NavItem } from '../Components/Navigation/NavItem'
+import { NavItem} from '../Components/Navigation/NavItem'
+import { BottomNav }  from '../Components/Navigation/BottomNavigation'
 
 
 export function MenuMovil(props) {
                         <img src={Logo} alt="pruebas psicometricas"/>
                     </div>
                 </div>
-
                 <NavItem icon={<Home/>} title="Inicio" route="home" />
                 <NavItem icon={<Work/>} title="Puestos" route="puestos" />
                 <NavItem icon={<VisibilityOff/>} title="Contraseñas" route="contrasenas" />
                 <NavItem icon={<PeopleAlt/>}  title="Expedientes" route="expedientes" />
                 <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
-
+                <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
+                <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
+                <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
+                <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
+                <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
+                <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
+                <BottomNav/>
             </div>
         </Fade>
     )

src/Components/Navigation/BottomNavigation.jsx

+import {ListItem, ListItemIcon,ListItemText } from '@mui/material/'
+import LogoutIcon from '@mui/icons-material/Logout';
+
+import useAuth from '../../Auth/useAuth';
+
+export function BottomNav() {
+    const auth = useAuth();
+
+    return (
+        <ListItem
+            className="close_nav_mov"
+            // onClick={() => console.log('cerrando session')}
+            onClick={() => auth.logout()}
+            button
+        >
+            <ListItemIcon>
+                <LogoutIcon/>
+            </ListItemIcon>
+            <ListItemText 
+                sx={{
+                    fontSize: 12,
+                    ' .css-10hburv-MuiTypography-root' : {
+                        fontSize : '.875rem'
+                    },
+                }}
+                primary={"Cerrar Session"} 
+                />
+
+        </ListItem>
+    );
+}