responsive listitem

src/Components/MenuMovil.js

@@ -1,42 +1,36 @@
-// import {useEffect} from 'react';
-// import { Menu, MenuItem } from '@mui/material';
-// import {  useNavigate} from "react-router-dom";
-
 import Logo from '../Images/logo.png';
 import Fade from '@mui/material/Fade';
 
-export function MenuMovil(props) {
+import {
+    Home, Work,VisibilityOff,PeopleAlt, Equalizer
+} from '@mui/icons-material/'
 
-    // const navigate = useNavigate()
 
-    let {  open } =  props;
-    console.log(props)
+import { NavItem } from '../Components/Navigation/NavItem'
 
-    // useEffect(() => {
-    //     console.log('render')
-    //     if(!open){
-    //         onClose();
-    //     }else{
-    //         document.getElementById("mySidebar").style.display = "block";
-    //     }
-    // },[open])
 
+export function MenuMovil(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" style={{  backgroundColor:  "whitesmoke"}}>
+                    <div className="width_img_mov">
                         <img src={Logo} alt="pruebas psicometricas"/>
                     </div>
                 </div>
-                <a href="/" className="w3-bar-item w3-button">Link 1</a>
-                <a href="/" className="w3-bar-item w3-button">Link 2</a>
-                <a href="/" className="w3-bar-item w3-button">Link 3</a>
+
+                <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" />
+
             </div>
         </Fade>
     )
 
 }
-

src/Components/Navigation/MainListItems.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { 
+    Home, Fingerprint, History, MiscellaneousServices , 
+    Work, VisibilityOff, PeopleAlt, Equalizer,
+    ExpandLess, ExpandMore
+} from '@mui/icons-material/'
+
+
+import { Collapse,ListItem, List ,ListItemIcon,ListItemText,ListSubheader } from '@mui/material/'
+import { NavItem } from './NavItem'
+
+
+export function MainListItems(props){
+
+    const [open, setOpen] = React.useState(false);
+
+    const showPruebas = () => {
+        if(!props.AppBarVisible){
+            props.setAppBarVisible(true);
+        }
+        setOpen(!open);
+    };
+
+    return(
+        <List>
+
+            <ListSubheader inset>MENÚ</ListSubheader>
+
+            <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" />
+
+            <ListItem selected={open} onClick={showPruebas}>
+                <ListItemIcon>
+                    <Fingerprint />
+                </ListItemIcon>
+
+
+                <ListItemText 
+                    sx={{
+                        fontSize: 12,
+                        ' .css-10hburv-MuiTypography-root' : {
+                            fontSize : '.875rem'
+                        },
+                    }}
+                    primary="Pruebas" 
+                />
+                {open ? <ExpandLess /> : <ExpandMore />}
+            </ListItem>
+
+
+            <Collapse in={open} timeout="auto" unmountOnExit>
+                <List component="div" disablePadding>
+
+                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/crear" title="Crear Prueba" />
+                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/listar"  title="Listado de pruebas" />
+                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/aplicar"  title="Aplicar" />
+                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/respuestas" title="Respuestas" />
+                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/calificaciones" title="Calificaciones" />
+
+                </List>
+            </Collapse>
+
+            <NavItem icon={<MiscellaneousServices/>} title="Configuraciones" route="configuraciones" />
+            <NavItem icon={<History/>} title="Historial" route="historial" />
+        </List>
+    )
+}

src/Components/Navigation/NavItem.jsx

@@ -0,0 +1,38 @@
+import { useNavigate, useResolvedPath, useMatch } from 'react-router-dom'
+import {ListItem, ListItemIcon,ListItemText } from '@mui/material/'
+
+export function NavItem (props){
+
+    let navigate = useNavigate()
+    let resolved = useResolvedPath(props.route);
+    let match = useMatch({ path: resolved.pathname, end: true });
+
+    let { title, route, icon, open, AppBarVisible, setOpen } = props
+
+    if(route.startsWith('prueba') && match && open && !AppBarVisible ){
+        setOpen(false);
+    }
+
+
+    return(
+        <ListItem
+            sx={{ color : '#25344f'}}
+            selected={ match && typeof(match) === "object" }
+            onClick={() => navigate(route) } 
+            button
+        >
+            <ListItemIcon>
+                {icon && icon}
+            </ListItemIcon>
+            <ListItemText 
+                sx={{
+                    fontSize: 12,
+                    ' .css-10hburv-MuiTypography-root' : {
+                        fontSize : '.875rem'
+                    },
+                }}
+                primary={title} 
+                />
+        </ListItem>
+    )
+}

src/Css/all.css

@@ -92,6 +92,8 @@ a:focus {
     float: left;
     margin: auto;
     padding: 11px;
+    /* margin-top : 25px; */
+    margin-top : 10px;
 }
 #sidebar ul.components {
     padding: 20px 0;
@@ -244,6 +246,10 @@ li.nav-item {
 .sidebar-header img {
     width: 100%;
 }
+
+.sidebar-header .width_img_mov {
+    width: 90%;
+}
 .list-unstyled i{
     font-size: 14px;
     margin-right: 10px;