new form test

src/Components/Dashboard.js

@@ -18,7 +18,8 @@ import ProfilePicture from '../Images/man.png';
 
 import useAuth from '../Auth/useAuth';
 import { Outlet, useNavigate} from "react-router-dom";
-import { MenuMovil } from '../Components/MenuMovil';
+// import { MenuMovil } from '../Components/MenuMovil';
+import { MenuMovil } from '../Components/Navigation/MenuMovil';
 import Footer from "../Components/Footer";
 
 
@@ -113,6 +114,9 @@ function DashboardContent() {
     };
 
     const MenuResponsive = ()  => {
+        if(!anchorElMovil){
+            // document.getElementsByTagName("MuiToolbar-root ").style.display = "none";
+        }
         setAnchorElMov(!anchorElMovil);
     } 
 
@@ -125,13 +129,7 @@ function DashboardContent() {
     return (
         <ThemeProvider theme={mdTheme}>
 
-            <MenuMovil
-                id="basic-menu"
-                anchorEl={anchorElMovil}
-                open={anchorElMovil}
-                onClose={handleCloseMov}
-                out={CerrarSession}
-                MenuListProps={{ 'aria-labelledby': 'basic-button', }} />
+            <MenuMovil anchor={anchorElMovil}/>
 
 
             <Box sx={{ display: 'flex' }}>
@@ -242,10 +240,7 @@ function DashboardContent() {
                     </Toolbar>
                     <Divider />
                     <List>
-                        <MainListItems 
-                            AppBarVisible={open}  
-                            setAppBarVisible={setOpen} 
-                            />
+                        <MainListItems AppBarVisible={open} setAppBarVisible={setOpen} />
                     </List>
                     <Divider />
                     <List>

src/Components/Navigation/MenuMovil.jsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Drawer from '@mui/material/Drawer';
+import List from '@mui/material/List';
+import Divider from '@mui/material/Divider';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import InboxIcon from '@mui/icons-material/MoveToInbox';
+import MailIcon from '@mui/icons-material/Mail';
+
+// import { MovilList } from './MovilList'
+let items = ['uno', 'dos', 'tres', 'cuatro', 'cinco','Inbox', 'Starred', 'Send email', 'Drafts','uno', 'dos', 'tres', 'cuatro', 'cinco','Inbox', 'Starred', 'Send email', 'Drafts']
+
+
+
+export function MenuMovil(props) {
+
+    let { anchor } = props;
+
+    const list = (anchor) => (
+        <Box
+            sx={{ width: anchor === 'top' || anchor === 'bottom' ? 'auto' : 250 }}
+            role="presentation"
+        >
+            <List>
+                {items.map((text, index) => (
+                    <ListItem key={text} disablePadding>
+                        <ListItemButton>
+                            <ListItemIcon>
+                                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+                            </ListItemIcon>
+                            <ListItemText primary={text} />
+                        </ListItemButton>
+                    </ListItem>
+                ))}
+            </List>
+            <Divider />
+            <List>
+                {['All mail', 'Trash', 'Spam'].map((text, index) => (
+                    <ListItem key={text} disablePadding>
+                        <ListItemButton>
+                            <ListItemIcon>
+                                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+                            </ListItemIcon>
+                            <ListItemText primary={text} />
+                        </ListItemButton>
+                    </ListItem>
+                ))}
+            </List>
+        </Box>
+    );
+
+
+    return (
+        <div>
+            <React.Fragment >
+                <Drawer
+                    anchor="left"
+                    open={anchor} >
+                    {list("left")}
+                </Drawer>
+            </React.Fragment>
+        </div>
+    );
+}

src/Components/Navigation/MovilList.jsx

@@ -0,0 +1,42 @@
+import Logo from '../../Images/logo.png';
+import Fade from '@mui/material/Fade';
+
+import {
+    Home, Work,VisibilityOff,PeopleAlt, Equalizer
+} from '@mui/icons-material/'
+
+
+import { NavItem} from '../../Components/Navigation/NavItem'
+import { BottomNav }  from '../../Components/Navigation/BottomNavigation'
+
+
+export function MovilList(props) {
+
+    let { open } =  props;
+
+    return(
+        <Fade 
+            in={open}>
+            <div className="menu-shit w3-sidebar w3-bar-block w3-border-right" id="mySidebar">
+                <div style={{ flat : 'righ' }} className="sidebar-header">
+                    <div className="width_img_mov">
+                        <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/Css/all.css

@@ -4002,7 +4002,7 @@ All this is done for any sub-level being entered.
     text-align: center;
 }
 @media (max-width: 1000px){
-    .MuiDrawer-paper{
+    .MuiDrawer-docked{
         display: none !important;
     }
 }