moving forward

psicoadmin/src/App.css

 
 .panel_card{
     display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     align-content: center;
     justify-content: space-around;
     align-items: center;
     flex-direction: row;
-    padding : 70px;
+    padding : 90px;
+    max-height : 175px;
 }

psicoadmin/src/Components/Card.js

 export function Card( props ){
     return(
         <div className="panel" >
-            <a href="#">
+            <a href="/">
                 <div className="panel_card">
                     <div>
                         <h1>{ props.title }</h1>
                     </div>
                     <div>
-                        <props.icon style={{ color :'#fd4b4b', fontSize : 45 }}/>
+                        <props.icon style={{ color :'#fd4b4b', fontSize : 45, margin : 5}}/>
                     </div>
                     <div className="content_info">
                         <p>432</p>

psicoadmin/src/Components/Dashboard.js

-import * as React from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { styled, createTheme, ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import MuiDrawer from '@mui/material/Drawer';
     }),
 }));
 
+const useCheckMobileScreen = () => {
+    const [width, setWidth] = useState(window.innerWidth);
+    const handleWindowSizeChange = () => {
+        let size = window.innerWidth;
+        console.log('SIZE >', size)
+        setWidth(size);
+    }
+
+    useEffect(() => {
+        window.addEventListener('resize', handleWindowSizeChange);
+        return () => {
+            window.removeEventListener('resize', handleWindowSizeChange);
+        }
+    }, []);
+
+    let isMobile = width <= 1000
+
+    return (isMobile);
+}
+
 const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
     ({ theme, open }) => ({
         '& .MuiDrawer-paper': {
 
 function DashboardContent() {
 
-    const [open, setOpen] = React.useState(true);
+    const [open, setOpen] = React.useState(false);
+
     const toggleDrawer = () => setOpen(!open);
     const auth = useAuth();
     const navigate = useNavigate()
     const open_profile = Boolean(anchorEl);
     const handleClick = (event) => setAnchorEl(event.currentTarget);
     const handleClose = () => setAnchorEl(null);
+
+    const MenuResponsive = ()  => {
+        console.log('show menu responsive')
+    } 
+
     const CerrarSession = () => {
         console.log('cerrando session')
         auth.logout();
         navigate('/')
     } 
 
+
     return (
         <ThemeProvider theme={mdTheme}>
             <Box sx={{ display: 'flex' }}>
                 <CssBaseline />
-                <AppBar style={{ backgroundColor : '#fff', boxShadow : 'None' }} position="absolute" open={open}>
+                <AppBar style={{ backgroundColor : '#fff', boxShadow : 'None' }} position="absolute" open={useCheckMobileScreen() ? false : 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' }), 
-                        }} >
+                        <IconButton 
+                            edge="start" 
+                            color="inherit" 
+                            aria-label="open drawer" 
+                            onClick={ useCheckMobileScreen() ? MenuResponsive : toggleDrawer } 
+                            // onClick={ () => console.log('que estoy haciendo con mi vida') } 
+                            sx={{ marginRight: '36px', ...( !useCheckMobileScreen() && open && { display: 'none' }), }} >
+
                             <MenuIcon  style={{
                                 background: '#ec5e69',
                                 fontSize: "40",
                         <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
 
                             {
-                                open ? (
+                                !useCheckMobileScreen() && open ? (
                                     <React.Fragment>
 
                                         <IconButton onClick={toggleDrawer}>
 
                         <div style={{ flat : 'righ' }} className="sidebar-header">
                             <div className="width_img">
-                                <img src={Logo} alt=""/>
+                                <img src={Logo} alt="pruebas psicometricas"/>
                             </div>
                         </div>
 

psicoadmin/src/Components/NavStyle.js

-import Color from 'color';
-
-const NavStyle = () => ({
-    root: ({ collapsed }) => ({
-        borderTopRightRadius: 20,
-        borderBottomRightRadius: 20,
-        minHeight: 32,
-        '-webkit-font-smoothing': 'antialiased',
-        padding: collapsed ? '0px 6px' : '0 12px 0 26px',
-        width: collapsed ? 32 : 'auto',
-        borderRadius: collapsed ? 20 : 0,
-        overflow: collapsed ? 'hidden' : 'visible',
-        marginLeft: collapsed ? 20 : '',
-        fontSize: 14,
-        '& > svg:first-child': {
-            marginRight: 18,
-            fontSize: 20,
-            opacity: 0.54,
-        },
-        '& .MuiLabel-amount': {
-            fontSize: '0.75rem',
-            letterSpacing: 0.3,
-            marginLeft: 'auto',
-            paddingLeft: 16,
-        },
-    }),
-    selected: ({ color = '#202124' }) => ({
-        fontWeight: 'bold',
-        color,
-        backgroundColor: `${Color(color)
-      .saturate(0.5)
-      .lighten(0.9)
-      .toString()} !important`,
-        '& > svg:first-child': {
-            opacity: 1,
-        }
-    }),
-});
-
-export default NavStyle

psicoadmin/src/Components/Routes.js

         if(!auth.isLogged(0)){
             return navigate('/')
         }
-    },[])
+    },[auth, ])
     
 
     return(
         <Routes>
 
-            <Route path="/" element={<Login/>}/>
+            <Route path="/" element={auth.isLogged() ? <Navigate to='dashboard/home'/> : <Login/>}/>
 
             {
                 auth.isLogged() ? 
             }
 
 
+
             <Route path="*" element={<NotFound/>}/>
 
         </Routes>

psicoadmin/src/Components/listItems.js

     };
 
     const [open, setOpen] = React.useState(false);
+    const [submenu, isSub] = React.useState(false);
 
     const showPruebas = () => {
+        handleListItemClick(-1)
         setOpen(!open);
     };
 
             {/* <Item icon={<FingerprintIcon/>} selected={selectedIndex}  change={handleListItemClick} index={5} title="Pruebas" route="/pruebas" /> */}
 
 
-            <ListItem onClick={showPruebas}>
+            <ListItem selected={open}  onClick={showPruebas}>
                 <ListItemIcon>
                     <FingerprintIcon />
                 </ListItemIcon>
                 <List component="div" disablePadding>
                         
                     <SubMenuItem route="pruebas/crear" selected={selectedIndex} index={5} change={handleListItemClick} title="Crear Prueba" />
-                    <SubMenuItem route="pruebas/listar" change={handleListItemClick} selected={selectedIndex} index={6} change={handleListItemClick} title="Listado de pruebas" />
+                    <SubMenuItem route="pruebas/listar" change={handleListItemClick} selected={selectedIndex} index={6} title="Listado de pruebas" />
                     <SubMenuItem route="pruebas/aplicar"  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" />

psicoadmin/src/Css/all.css

 }
 .content-section .main p {
     color: #878787;
-    padding: 0 15px;
+    /* padding: 0 15px; */
     /* margin-bottom: 40px; */
 }
 .datos_candidato {
     margin: 0!important;
     text-align: center;
 }
+@media (max-width: 1000px){
+    .MuiDrawer-paper{
+        display: none !important;
+    }
+}
+
+
+

psicoadmin/src/Pages/Configuracion.js

                                 <div class="row">
                                     <div class="col-md-4">
                                         <div class="img-container">
-                                            <img src={ProfilePicture} alt='profile picture' />
+                                            <img src={ProfilePicture} alt='profile ' />
                                         </div>
                                     </div>
                                     <div class="col-md-8">
                                 </div>
                                 <div class="boton_guardar_info">
                                     <div class="success_btn">
-                                        <a href="#">Guardar</a>
+                                        <a href="/">Guardar</a>
                                     </div>
                                 </div>
                             </div>

psicoadmin/src/Pages/Historial.js

 import Stack from '@mui/material/Stack';
 
 function CardChar (props){
-    let { image, name, species } = props.proto
+    let { image, name } = props.proto
     return(
         <Card onClick={ () => props.remove(props.id) } style={{ width: '18rem' }}>
             <Card.Img variant="top" src={image} />
 
         console.log('Render', character, elements)
 
-    }, [elements])
+    }, [elements, character])
 
 
     const Remove = (index) =>{