pre react router fixes

psicoadmin/src/App.css

@@ -62,4 +62,3 @@
     line-height: 30px !important;
     font-size : 12px !important;
 }
-

psicoadmin/src/Components/Dashboard.js

@@ -16,7 +16,6 @@ import Avatar from '@mui/material/Avatar';
 import MenuIcon from '@mui/icons-material/Menu';
 import FullscreenIcon from '@mui/icons-material/Fullscreen';
 
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import NotificationsIcon from '@mui/icons-material/Notifications';
 import { MainListItems, secondaryListItems } from './listItems';
 
@@ -104,31 +103,40 @@ function DashboardContent() {
         <ThemeProvider theme={mdTheme}>
             <Box sx={{ display: 'flex' }}>
                 <CssBaseline />
-                <AppBar style={{ backgroundColor : '#fff' }} position="absolute" open={open}>
+                <AppBar style={{ backgroundColor : '#fff', boxShadow : 'None' }} position="absolute" open={open}>
                     <Toolbar sx={{ pr: '24px' ,  borderBottom : "1px solid #ec5e69"}} >
 
-                        <IconButton style={{ color : '#212529' }} edge="start" color="inherit" aria-label="open drawer" onClick={toggleDrawer} sx={{ marginRight: '36px', ...(open && { display: 'none' }), }} >
-                            <MenuIcon />
+                        <IconButton style={{ 
+                                // color : '#212529',
+                        }} edge="start" color="inherit" aria-label="open drawer" onClick={toggleDrawer} sx={{ 
+                                marginRight: '36px', ...(open && { display: 'none' }), 
+                        }} >
+                            <MenuIcon  style={{
+                                background: '#ec5e69',
+                                fontSize: "40",
+                                color: "#fff"
+                            }}/>
                         </IconButton>
 
                         <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
 
-                        <IconButton onClick={toggleDrawer}>
                             {
-                                open ? 
-                                    (
+                                open ? (
                                     <React.Fragment>
-                                        <MenuIcon />
-                                        <FullscreenIcon style={{ marginLeft : 15 }}/>
-                                    </React.Fragment>
-                                    )
-                                : undefined
 
-                            }
-                        </IconButton>
+                                        <IconButton onClick={toggleDrawer}>
+                                            <MenuIcon />
+                                        </IconButton>
 
+                                        <IconButton onClick={ (event) =>  event.target.requestFullscreen() }>
+                                            <FullscreenIcon style={{ paddinLeft : 15 }}/>
+                                        </IconButton>
 
 
+                                    </React.Fragment>
+                                ) : undefined
+                            }
+
 
                         </Typography>
 
@@ -190,17 +198,14 @@ function DashboardContent() {
                             alignItems: 'center',
                             justifyContent: 'flex-start',
                             px: [1],
-                            
+
                         }} >
 
                         <div style={{ flat : 'righ' }} className="sidebar-header">
-                                <div className="width_img">
-                                    <img src={Logo} alt=""/>
-                                </div>
+                            <div className="width_img">
+                                <img src={Logo} alt=""/>
                             </div>
-
-
-
+                        </div>
 
                     </Toolbar>
                     <Divider />
@@ -214,6 +219,7 @@ function DashboardContent() {
                     <Toolbar />
 
                     <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+                        <h1> Bienviendo </h1>
                     </Container>
 
                 </Box>

psicoadmin/src/Components/NavStyle.js

@@ -1,6 +1,6 @@
 import Color from 'color';
 
-export default () => ({
+const NavStyle = () => ({
     root: ({ collapsed }) => ({
         borderTopRightRadius: 20,
         borderBottomRightRadius: 20,
@@ -37,3 +37,4 @@ export default () => ({
     }),
 });
 
+export default NavStyle

psicoadmin/src/Components/listItems.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import ListItemButton from '@mui/material/ListItemButton';
 import ListItem from '@mui/material/ListItem';
 import List from '@mui/material/List';
 
@@ -23,8 +22,37 @@ import OndemandVideoIcon from '@mui/icons-material/OndemandVideo';
 import StarIcon from '@mui/icons-material/Star';
 import SupportAgentIcon from '@mui/icons-material/SupportAgent';
 
-import NavStyle from './NavStyle' 
+import Collapse from '@mui/material/Collapse';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
 
+function SubMenuItem (props) {
+
+    function change (event){
+        props.change(event, props.index)
+    } 
+
+    let isOn = props.selected === props.index
+
+    return(
+        <ListItem 
+            sx={{ pl: 9}}
+            selected={isOn}
+            onClick={change} 
+            button
+        >
+            <ListItemText 
+                sx={{
+                    fontSize: 12,
+                    ' .css-10hburv-MuiTypography-root' : {
+                        fontSize : '.875rem'
+                    },
+                }}
+                primary={props.title} 
+            />
+        </ListItem>
+    )
+}
 
 function Item (props) {
 
@@ -32,18 +60,13 @@ function Item (props) {
     function change (event){
         props.change(event, props.index)
     } 
+
     let isOn = props.selected === props.index
 
     //.css-10oikv1-MuiButtonBase-root-MuiListItem-root.Mui-selected
     return(
         <ListItem
-            sx={{
-                color : '#25344f',
-                '& .MuiButtonBase-selected' :{
-                    color : '#121212',
-                    backgroundColor : '#101010'
-                }
-            }}
+            sx={{ color : '#25344f'}}
             selected={isOn}
             onClick={change} 
             button
@@ -66,7 +89,7 @@ function Item (props) {
 
 
 export const MainListItems = () =>  {
-    
+
     const [selectedIndex, setSelectedIndex] = React.useState(1);
 
 
@@ -74,6 +97,12 @@ export const MainListItems = () =>  {
         setSelectedIndex(index);
     };
 
+    const [open, setOpen] = React.useState(true);
+
+    const showPruebas = () => {
+        setOpen(!open);
+    };
+
 
     return(
         <List>
@@ -83,9 +112,41 @@ export const MainListItems = () =>  {
             <Item icon={<VisibilityOffIcon/>} selected={selectedIndex}  change={handleListItemClick} index={2} title="Contraseñas" route="/contrasenas" />
             <Item icon={<PeopleAltIcon/>} selected={selectedIndex}  change={handleListItemClick} index={3} title="Expedientes" route="/expedientes" />
             <Item icon={<EqualizerIcon/>} selected={selectedIndex}  change={handleListItemClick} index={4} title="Resultados" route="/resultados" />
-            <Item icon={<FingerprintIcon/>} selected={selectedIndex}  change={handleListItemClick} index={5} title="Pruebas" route="/pruebas" />
-            <Item icon={<MiscellaneousServicesIcon/>} selected={selectedIndex}  change={handleListItemClick} index={6} title="Configuraciones" route="/configuraciones" />
-            <Item icon={<HistoryIcon/>} selected={selectedIndex}  change={handleListItemClick} index={7} title="Historial" route="/historial" />
+            {/* <Item icon={<FingerprintIcon/>} selected={selectedIndex}  change={handleListItemClick} index={5} title="Pruebas" route="/pruebas" /> */}
+
+
+            <ListItem onClick={showPruebas}>
+                <ListItemIcon>
+                    <FingerprintIcon />
+                </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>
+                        
+                    <SubMenuItem selected={selectedIndex} index={5} change={handleListItemClick} title="Crear Prueba" />
+                    <SubMenuItem selected={selectedIndex} index={6} change={handleListItemClick} title="Listado de pruebas" />
+                    <SubMenuItem selected={selectedIndex} index={7} change={handleListItemClick} title="Aplicar" />
+                    <SubMenuItem selected={selectedIndex} index={8} change={handleListItemClick} title="Respuestas" />
+                    <SubMenuItem selected={selectedIndex} index={9} change={handleListItemClick} title="Calificaciones" />
+
+                </List>
+            </Collapse>
+
+            <Item icon={<MiscellaneousServicesIcon/>} selected={selectedIndex}  change={handleListItemClick} index={10} title="Configuraciones" route="/configuraciones" />
+            <Item icon={<HistoryIcon/>} selected={selectedIndex}  change={handleListItemClick} index={11} title="Historial" route="/historial" />
         </List>
     )
 };