on demand menu items

src/Components/Navigation/listItems.js

@@ -1,18 +1,16 @@
 import * as React from 'react';
 import { Nav } from 'react-bootstrap';
 
-import { 
-    Fingerprint, History, MiscellaneousServices , 
-    ExpandLess, ExpandMore
-} from '@mui/icons-material/'
+import { Fingerprint, 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
+    MainItems, ExtraItems, PruebaItems, TxTStyle
 } from '../../Utils/MenuItems'
 
+
 function NavItem (props) {
     
     let navigate = useNavigate()
@@ -36,12 +34,7 @@ function NavItem (props) {
                 {icon && icon}
             </ListItemIcon>
             <ListItemText 
-                sx={{
-                    fontSize: 12,
-                    ' .css-10hburv-MuiTypography-root' : {
-                        fontSize : '.875rem'
-                    },
-                }}
+                sx={TxTStyle}
                 primary={title} 
             />
         </ListItem>
@@ -62,35 +55,22 @@ export const MainListItems = (props) =>  {
 
     return(
         <List>
-
             <ListSubheader inset>MENÚ</ListSubheader>
-
-
             {
                 MainItems.map( ({ icon, title, route}) =>  (
                     <NavItem icon={icon} title={title} route={route} />
                 ))
             }
-
             <ListItem selected={open} onClick={showPruebas}>
                 <ListItemIcon>
                     <Fingerprint />
                 </ListItemIcon>
-
-
                 <ListItemText 
-                    sx={{
-                        fontSize: 12,
-                        ' .css-10hburv-MuiTypography-root' : {
-                            fontSize : '.875rem'
-                        },
-                    }}
+                    sx={TxTStyle}
                     primary="Pruebas" 
                 />
                 {open ? <ExpandLess /> : <ExpandMore />}
             </ListItem>
-
-
             <Collapse in={open} timeout="auto" unmountOnExit>
                 <List component="div" disablePadding>
                     {
@@ -101,8 +81,6 @@ export const MainListItems = (props) =>  {
                 </List>
             </Collapse>
 
-            <NavItem icon={<MiscellaneousServices/>} title="Configuraciones" route="configuraciones" />
-            <NavItem icon={<History/>} title="Historial" route="historial" />
         </List>
     )
 };

src/Utils/MenuItems.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import {
     Home,Work, VisibilityOff, PeopleAlt,
-    Equalizer, OndemandVideo, SupportAgent, Star
+    Equalizer, OndemandVideo, SupportAgent, Star,
+    MiscellaneousServices, History
 } from '@mui/icons-material'
 
 
@@ -31,6 +32,16 @@ export const MainItems = [
         route : 'resultados',
         title : 'Resultados'
     },
+    {
+        icon : <MiscellaneousServices/>,
+        route : 'configuraciones',
+        title : 'Configuraciones'
+    },
+    {
+        icon : <History/>,
+        route : 'historial',
+        title : 'Historial'
+    },
 ]
 
 export const ExtraItems = [
@@ -73,3 +84,11 @@ export const PruebaItems = [
         title:"Calificaciones",
     },
 ]
+
+export const TxTStyle = {
+    fontSize: 12,
+    ' .css-10hburv-MuiTypography-root' : {
+        fontSize : '.875rem'
+    },
+}
+