moving forward

psicoadmin/src/App.css

@@ -70,10 +70,11 @@
 
 .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

@@ -1,13 +1,13 @@
 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

@@ -1,4 +1,4 @@
-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';
@@ -52,6 +52,26 @@ const AppBar = styled(MuiAppBar, {
     }),
 }));
 
+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': {
@@ -82,7 +102,8 @@ const mdTheme = createTheme();
 
 function DashboardContent() {
 
-    const [open, setOpen] = React.useState(true);
+    const [open, setOpen] = React.useState(false);
+
     const toggleDrawer = () => setOpen(!open);
     const auth = useAuth();
     const navigate = useNavigate()
@@ -91,24 +112,34 @@ function DashboardContent() {
     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",
@@ -119,7 +150,7 @@ function DashboardContent() {
                         <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
 
                             {
-                                open ? (
+                                !useCheckMobileScreen() && open ? (
                                     <React.Fragment>
 
                                         <IconButton onClick={toggleDrawer}>
@@ -201,7 +232,7 @@ function DashboardContent() {
 
                         <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

@@ -1,40 +0,0 @@
-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

@@ -26,13 +26,13 @@ export default function MyRoutes () {
         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() ? 
@@ -54,6 +54,7 @@ export default function MyRoutes () {
             }
 
 
+
             <Route path="*" element={<NotFound/>}/>
 
         </Routes>

psicoadmin/src/Components/listItems.js

@@ -114,8 +114,10 @@ export const MainListItems = () =>  {
     };
 
     const [open, setOpen] = React.useState(false);
+    const [submenu, isSub] = React.useState(false);
 
     const showPruebas = () => {
+        handleListItemClick(-1)
         setOpen(!open);
     };
 
@@ -131,7 +133,7 @@ export const MainListItems = () =>  {
             {/* <Item icon={<FingerprintIcon/>} selected={selectedIndex}  change={handleListItemClick} index={5} title="Pruebas" route="/pruebas" /> */}
 
 
-            <ListItem onClick={showPruebas}>
+            <ListItem selected={open}  onClick={showPruebas}>
                 <ListItemIcon>
                     <FingerprintIcon />
                 </ListItemIcon>
@@ -153,7 +155,7 @@ export const MainListItems = () =>  {
                 <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

@@ -2018,7 +2018,7 @@ label {
 }
 .content-section .main p {
     color: #878787;
-    padding: 0 15px;
+    /* padding: 0 15px; */
     /* margin-bottom: 40px; */
 }
 .datos_candidato {
@@ -3940,3 +3940,11 @@ All this is done for any sub-level being entered.
     margin: 0!important;
     text-align: center;
 }
+@media (max-width: 1000px){
+    .MuiDrawer-paper{
+        display: none !important;
+    }
+}
+
+
+

psicoadmin/src/Pages/Configuracion.js

@@ -13,7 +13,7 @@ export function Configuracion() {
                                 <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">
@@ -52,7 +52,7 @@ export function Configuracion() {
                                 </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

@@ -4,7 +4,7 @@ import Skeleton from '@mui/material/Skeleton';
 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} />
@@ -59,7 +59,7 @@ export function Historial () {
 
         console.log('Render', character, elements)
 
-    }, [elements])
+    }, [elements, character])
 
 
     const Remove = (index) =>{