on demand itemlist

src/Components/Dashboard.js

                                 open={open_profile}
                                 onClose={handleClose}
                                 MenuListProps={{ 'aria-labelledby': 'basic-button', }}>
-                                <MenuItem onClick={() => navigate('dashboard/perfil') }>Profile</MenuItem>
-                                <MenuItem onClick={() => console.log('opcion 2')}>My account</MenuItem>
+                                <MenuItem onClick={() => navigate('dashboard/perfil') }>Mi Cuenta</MenuItem>
+                                <MenuItem onClick={() => console.log('dashboard/perfil')}>Configuraciones</MenuItem>
                                 <MenuItem onClick={CerrarSession}>Logout</MenuItem>
                             </Menu>
                         </Box>

src/Components/Navigation/listItems.js

 import { Nav } from 'react-bootstrap';
 
 import { 
-    Home, Fingerprint, History, MiscellaneousServices , 
-    Work, VisibilityOff, PeopleAlt, Equalizer,
-    OndemandVideo, SupportAgent, Star,
+    Fingerprint, History, MiscellaneousServices , 
     ExpandLess, ExpandMore
 } from '@mui/icons-material/'
 
-
 import { useNavigate, useResolvedPath, useMatch } from 'react-router-dom'
 import { Collapse,ListItem, List ,ListItemIcon,ListItemText,ListSubheader } from '@mui/material/'
 
+import { 
+    MainItems, ExtraItems, PruebaItems
+} from '../../Utils/MenuItems'
+
 function NavItem (props) {
     
     let navigate = useNavigate()
 
     if(route.startsWith('prueba') && match && open && !AppBarVisible ){
         setOpen(false);
-        // setAppBarVisible(true)
     }
 
 
             sx={{ color : '#25344f'}}
             selected={ match && typeof(match) === "object" }
             onClick={() => navigate(route) } 
-            button
-        >
+            button >
             <ListItemIcon>
                 {icon && icon}
             </ListItemIcon>
 
             <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" />
+
+            {
+                MainItems.map( ({ icon, title, route}) =>  (
+                    <NavItem icon={icon} title={title} route={route} />
+                ))
+            }
 
             <ListItem selected={open} onClick={showPruebas}>
                 <ListItemIcon>
 
             <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" />
-
+                    {
+                        PruebaItems.map( ({ route, title}) => 
+                            ( <NavItem setOpen={setOpen} { ...props} open={open} route={route} title={title} />)
+                        )
+                    }
                 </List>
             </Collapse>
 
 export const SecondaryListItems = (
     <Nav>
         <ListSubheader inset>EXTRAS</ListSubheader>
-        <NavItem icon={<Star/>} title="Elementos" route="/work" />
-        <NavItem icon={<OndemandVideo/>} title="Tutoriales" route="/worktwo" />
-        <NavItem icon={<SupportAgent/>} title="Asistencia Técnica" route="/worktree" />
+        {
+            ExtraItems.map( ({ icon, route, title}) => 
+                ( <NavItem icon={icon} title={title} route={route} />)
+            )
+        }
     </Nav>
 );
 

src/Utils/MenuItems.js

+import React from 'react';
+import {
+    Home,Work, VisibilityOff, PeopleAlt,
+    Equalizer, OndemandVideo, SupportAgent, Star
+} from '@mui/icons-material'
+
+
+export const MainItems = [
+    {
+        icon : <Home/>,
+        route : 'home',
+        title : 'Inicio'
+    },
+    {
+        icon : <Work/>,
+        route : 'puestos',
+        title : 'Puestos'
+    },
+    {
+        icon : <VisibilityOff/>,
+        route : 'contrasenas',
+        title : 'Contraseñas'
+    },
+    {
+        icon : <PeopleAlt/>,
+        route : 'expedientes',
+        title : 'Expedientes'
+    },
+    {
+        icon : <Equalizer/>,
+        route : 'resultados',
+        title : 'Resultados'
+    },
+]
+
+export const ExtraItems = [
+    {
+        icon : <Star/>,
+        route : 'work',
+        title : 'Elementos'
+    },
+    {
+        icon : <OndemandVideo/>,
+        route : 'worktwo',
+        title : 'Tutoriales'
+    },
+    {
+        icon : <SupportAgent/>,
+        route : 'worktree',
+        title : 'Asistencia Técnica'
+    },
+]
+
+export const PruebaItems = [
+    {
+        route:"pruebas/crear",
+        title:"Crear Prueba",
+    },
+    {
+        route:"pruebas/listar",
+        title:"Listado de pruebas",
+    },
+    {
+        route:"pruebas/aplicar",
+        title:"Aplicar",
+    },
+    {
+        route:"pruebas/respuestas",
+        title:"Respuestas",
+    },
+    {
+        route:"pruebas/calificaciones",
+        title:"Calificaciones",
+    },
+]