fixes esteticos

src/Components/Dashboard.js

@@ -15,6 +15,7 @@ import {
 } from '@mui/icons-material'
 
 import Logo from '../Images/evaluacion.jpeg';
+import { stringAvatar } from '../Utils/avatar'
 
 import { Outlet, useNavigate } from "react-router-dom";
 import { MenuMovil } from '../Components/Navigation/MenuMovil';
@@ -29,34 +30,6 @@ import { removeToken } from '../Slices/tokenSlice';
 const drawerWidth = 240;
 const mdTheme = createTheme();
 
-function stringToColor(string) {
-  let hash = 0;
-  let i;
-  /* eslint-disable no-bitwise */
-  for (i = 0; i < string.length; i += 1) {
-    hash = string.charCodeAt(i) + ((hash << 5) - hash);
-  }
-
-  let color = '#';
-
-  for (i = 0; i < 3; i += 1) {
-    const value = (hash >> (i * 8)) & 0xff;
-    color += `00${value.toString(16)}`.slice(-2);
-  }
-  /* eslint-enable no-bitwise */
-  return color;
-}
-
-
-function stringAvatar(name) {
-  console.log("NAME: ", name)
-  return {
-    sx: {
-      bgcolor: stringToColor(name),
-    },
-    children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
-  };
-}
 
 const AppBar = styled(MuiAppBar, {
   shouldForwardProp: (prop) => prop !== 'open',
@@ -76,7 +49,6 @@ const AppBar = styled(MuiAppBar, {
   }),
 }));
 
-
 const Drawer = styled(MuiDrawer,
   { shouldForwardProp: (prop) => prop !== 'open' })(
     ({ theme, open }) => ({
@@ -104,7 +76,6 @@ const Drawer = styled(MuiDrawer,
     }),
   );
 
-
 function DashboardContent() {
 
   const [open, setOpen] = React.useState(false);
@@ -193,7 +164,7 @@ function DashboardContent() {
                 onClick={handleClick}
                 color="inherit"
               >
-                {/* <Avatar alt="Cindy Baker" src={ProfilePicture} /> */ }
+                {/* <Avatar alt="Cindy Baker" src={ProfilePicture} /> */}
                 <Avatar {...stringAvatar(`${profile.nombre} ${profile.apelidos}`)} />
 
               </IconButton>

src/Components/Routes.js

@@ -43,7 +43,10 @@ export default function MyRoutes() {
             <User />
           </RequireUserToken>
         } >
+        <Route path="default" element={<Default />} />
+        <Route path="default2" element={<Default />} />
         <Route path="home" element={<HomeUser />} />
+        <Route path="pruebas" element={<HomeUser />} />
         <Route path="prueba">
           <Route path=":id" element={<Prueba />} />
           <Route path="" element={<Prueba />} />

src/Components/User.jsx

@@ -2,21 +2,23 @@ import React from 'react';
 import { ThemeProvider, styled, createTheme } from '@mui/material/styles';
 import '../Css/user.css'
 import { removeToken } from '../Slices/tokenSlice'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import {
-    Container, IconButton, Divider,
-    Typography, List, Toolbar,useMediaQuery as Size,
-    Box, Badge, Menu, Avatar, MenuItem
+  Container, IconButton, Divider,
+  Typography, List, Toolbar, useMediaQuery as Size,
+  Box, Badge, Menu, Avatar, MenuItem
 } from '@mui/material'
 
 import {
-    Fullscreen as FullscreenIcon,
-    Menu as MenuIcon,
-    KeyboardDoubleArrowLeft as LeftKey,
-    Mail as MailIcon, Notifications as NotificationsIcon,
+  Fullscreen as FullscreenIcon,
+  Menu as MenuIcon,
+  KeyboardDoubleArrowLeft as LeftKey,
+  Notifications as NotificationsIcon,
 } from '@mui/icons-material'
 
+import { stringAvatar } from '../Utils/avatar'
+
 import Logo from '../Images/evaluacion.jpeg';
 
 import { Outlet, useNavigate } from "react-router-dom";
@@ -25,195 +27,192 @@ import Footer from "../Components/Footer";
 
 import { Drawer as MuiDrawer, AppBar as MuiAppBar } from "../Components/Navigation/AppBar"
 import { UserListItems, SecondaryListItems } from '../Components/Navigation/listItems';
-import ProfilePicture from '../Images/man.png';
+// import ProfilePicture from '../Images/man.png';
 
 const drawerWidth = 240;
 const mdTheme = createTheme();
 
 const AppBar = styled(MuiAppBar, {
-    shouldForwardProp: (prop) => prop !== 'open',
+  shouldForwardProp: (prop) => prop !== 'open',
 })(({ theme, open }) => ({
-    zIndex: theme.zIndex.drawer + 1,
+  zIndex: theme.zIndex.drawer + 1,
+  transition: theme.transitions.create(['width', 'margin'], {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  ...(open && {
+    marginLeft: drawerWidth,
+    width: `calc(100% - ${drawerWidth}px)`,
     transition: theme.transitions.create(['width', 'margin'], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-    }),
-    ...(open && {
-        marginLeft: drawerWidth,
-        width: `calc(100% - ${drawerWidth}px)`,
-        transition: theme.transitions.create(['width', 'margin'], {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.enteringScreen,
-        }),
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
     }),
+  }),
 }));
 
 
-const Drawer = styled(MuiDrawer, 
-    { shouldForwardProp: (prop) => prop !== 'open' })(
+const Drawer = styled(MuiDrawer,
+  { shouldForwardProp: (prop) => prop !== 'open' })(
     ({ theme, open }) => ({
-        '& .MuiDrawer-paper': {
-            position: 'relative',
-            whiteSpace: 'nowrap',
-            width: drawerWidth,
-            transition: theme.transitions.create('width', {
-                easing: theme.transitions.easing.sharp,
-                duration: theme.transitions.duration.enteringScreen,
-            }),
-            boxSizing: 'border-box',
-            ...(!open && {
-                overflowX: 'hidden',
-                transition: theme.transitions.create('width', {
-                    easing: theme.transitions.easing.sharp,
-                    duration: theme.transitions.duration.leavingScreen,
-                }),
-                width: theme.spacing(7),
-                [theme.breakpoints.up('sm')]: {
-                    width: theme.spacing(9),
-                },
-            }),
-        },
+      '& .MuiDrawer-paper': {
+        position: 'relative',
+        whiteSpace: 'nowrap',
+        width: drawerWidth,
+        transition: theme.transitions.create('width', {
+          easing: theme.transitions.easing.sharp,
+          duration: theme.transitions.duration.enteringScreen,
+        }),
+        boxSizing: 'border-box',
+        ...(!open && {
+          overflowX: 'hidden',
+          transition: theme.transitions.create('width', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+          }),
+          width: theme.spacing(7),
+          [theme.breakpoints.up('sm')]: {
+            width: theme.spacing(9),
+          },
+        }),
+      },
     }),
-);
+  );
 
 export function User() {
 
-    const [open, setOpen] = React.useState(true);
-
-    const isMovil = Size('(max-width:1000px)');
-    const navigate = useNavigate()
-    let dispatch = useDispatch()
-
-    const CerrarSession = () => {
-      dispatch(removeToken({ candi:true}))
-      navigate('/logincd')
-    }
-
-    const [anchorEl, setAnchorEl] = React.useState(null);
-    const open_profile = Boolean(anchorEl);
-    const handleClick = (event) =>  setAnchorEl(event.currentTarget);
-    const handleClose = () => setAnchorEl(null)
-    const toggleDrawer = () => {
-        if(isMovil){
-            setAnchorElMov(!anchorElMovil)
-        }else{
-            setOpen(!open);
-        }
+  const [open, setOpen] = React.useState(true);
+
+  const isMovil = Size('(max-width:1000px)');
+  const navigate = useNavigate()
+  let dispatch = useDispatch()
+  let profile = useSelector((state) => state.user.profile)
+  let name = `${(profile?.email.substring(0, 1))} ${profile?.email.substring(1, 2)}`
+
+  const CerrarSession = () => {
+    dispatch(removeToken({ candi: true }))
+    navigate('/logincd')
+  }
+
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open_profile = Boolean(anchorEl);
+  const handleClick = (event) => setAnchorEl(event.currentTarget);
+  const handleClose = () => setAnchorEl(null)
+  const toggleDrawer = () => {
+    if (isMovil) {
+      setAnchorElMov(!anchorElMovil)
+    } else {
+      setOpen(!open);
     }
-    const [anchorElMovil, setAnchorElMov] = React.useState(false);
-    React.useEffect(() => isMovil ? setOpen(false) : null , [isMovil])
-
-    return (
-        <ThemeProvider theme={mdTheme}>
-
-            <MenuMovil anchor={anchorElMovil} control={setAnchorElMov} />
-
-            <Box sx={{ display: 'flex' }}>
-                <AppBar style={{ backgroundColor: '#fff', boxShadow: 'None' }} position="absolute" open={open}>
-                    <Toolbar sx={{ pr: '24px', borderBottom: "1px solid var(--main)" }} >
-                        <IconButton
-                            name="navigation_icon_button"
-                            edge="start"
-                            color="inherit"
-                            aria-label="open drawer"
-                            onClick={toggleDrawer}
-                            sx={{ marginRight: '36px', ...( open  && { display: 'none' }), }} >
-                            <MenuIcon style={{
-                                background: 'var(--main)',
-                                fontSize: "40",
-                                color: "#fff"
-                            }} />
-                        </IconButton>
-                        <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
-                            {
-                                open ? (
-                                    <React.Fragment>
-
-                                        <IconButton onClick={toggleDrawer}>
-                                            <LeftKey/>
-                                        </IconButton>
-
-                                        <IconButton onClick={(event) => event.target.requestFullscreen()}>
-                                            <FullscreenIcon style={{ paddinLeft: 15 }} />
-                                        </IconButton>
-                                    </React.Fragment>
-                                ) : undefined
-                            }
-                        </Typography>
-
-                        <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
-                            <IconButton size="large" aria-label="show 4 new mails" color="inherit">
-                                <Badge badgeContent={4} color="error">
-                                    <MailIcon style={{ color : '#212529' }} />
-                                </Badge>
-                            </IconButton>
-                            <IconButton
-                                size="large"
-                                aria-label="show 17 new notifications"
-                                color="inherit">
-                                <Badge badgeContent={17} color="error">
-                                    <NotificationsIcon style={{ color : '#212529' }}/>
-                                </Badge>
-                            </IconButton>
-
-
-                            <IconButton
-                                size="small"
-                                edge="end"
-                                aria-label="account of current user"
-                                aria-haspopup="true"
-                                aria-expanded={open_profile ? 'true' : undefined}
-                                onClick={handleClick}
-                                color="inherit"
-                            >
-                                <Avatar alt="Cindy Baker" src={ProfilePicture} />
-
-                            </IconButton>
-                            <Menu
-                                id="basic-menu"
-                                anchorEl={anchorEl}
-                                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={CerrarSession}>Logout</MenuItem>
-                            </Menu>
-                        </Box>
-
-
-                    </Toolbar>
-                </AppBar>
-                <Drawer variant="permanent" open={open} >
-                    <Toolbar
-                        sx={{
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'flex-start',
-                            px: [1]
-                        }} >
-                        <div style={{ flat: 'righ' }} className="sidebar-header">
-                            <div className="width_img">
-                                <img src={Logo} alt="pruebas psicometricas" />
-                            </div>
-                        </div>
-                    </Toolbar>
-                    <Divider />
-                    <List>
-                        <UserListItems AppBarVisible={open} setAppBarVisible={setOpen} />
-                    </List>
-                    <Divider />
-                    <List>
-                        {SecondaryListItems}
-                    </List>
-                </Drawer>
-                <Container maxWidth="lg" sx={{ mt: 2, mb: 2 }}>
-                    <Outlet />
-                    <Footer />
-                </Container>
+  }
+  const [anchorElMovil, setAnchorElMov] = React.useState(false);
+  React.useEffect(() => isMovil ? setOpen(false) : null, [isMovil])
+
+  return (
+    <ThemeProvider theme={mdTheme}>
+
+      <MenuMovil anchor={anchorElMovil} control={setAnchorElMov} />
+
+      <Box sx={{ display: 'flex' }}>
+        <AppBar style={{ backgroundColor: '#fff', boxShadow: 'None' }} position="absolute" open={open}>
+          <Toolbar sx={{ pr: '24px', borderBottom: "1px solid var(--main)" }} >
+            <IconButton
+              name="navigation_icon_button"
+              edge="start"
+              color="inherit"
+              aria-label="open drawer"
+              onClick={toggleDrawer}
+              sx={{ marginRight: '36px', ...(open && { display: 'none' }), }} >
+              <MenuIcon style={{
+                background: 'var(--main)',
+                fontSize: "40",
+                color: "#fff"
+              }} />
+            </IconButton>
+            <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
+              {
+                open ? (
+                  <React.Fragment>
+
+                    <IconButton onClick={toggleDrawer}>
+                      <LeftKey />
+                    </IconButton>
+
+                    <IconButton onClick={(event) => event.target.requestFullscreen()}>
+                      <FullscreenIcon style={{ paddinLeft: 15 }} />
+                    </IconButton>
+                  </React.Fragment>
+                ) : undefined
+              }
+            </Typography>
+
+            <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
+              <IconButton
+                size="large"
+                aria-label="show 17 new notifications"
+                color="inherit">
+                <Badge badgeContent={1} color="error">
+                  <NotificationsIcon style={{ color: '#212529' }} />
+                </Badge>
+              </IconButton>
+
+
+              <IconButton
+                size="small"
+                edge="end"
+                aria-label="account of current user"
+                aria-haspopup="true"
+                aria-expanded={open_profile ? 'true' : undefined}
+                onClick={handleClick}
+                color="inherit"
+              >
+                <Avatar {...stringAvatar(name)} />
+
+              </IconButton>
+              <Menu
+                id="basic-menu"
+                anchorEl={anchorEl}
+                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={CerrarSession}>Logout</MenuItem>
+              </Menu>
             </Box>
-        </ThemeProvider>
-    );
+
+
+          </Toolbar>
+        </AppBar>
+        <Drawer variant="permanent" open={open} >
+          <Toolbar
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-start',
+              px: [1]
+            }} >
+            <div style={{ flat: 'righ' }} className="sidebar-header">
+              <div className="width_img">
+                <img src={Logo} alt="pruebas psicometricas" />
+              </div>
+            </div>
+          </Toolbar>
+          <Divider />
+          <List>
+            <UserListItems AppBarVisible={open} setAppBarVisible={setOpen} />
+          </List>
+          <Divider />
+          <List>
+            {SecondaryListItems}
+          </List>
+        </Drawer>
+        <Container maxWidth="lg" sx={{ mt: 2, mb: 2 }}>
+          <Outlet />
+          <Footer />
+        </Container>
+      </Box>
+    </ThemeProvider>
+  );
 
 }
 

src/Utils/avatar.jsx

@@ -0,0 +1,27 @@
+function stringToColor(string) {
+  let hash = 0;
+  let i;
+  /* eslint-disable no-bitwise */
+  for (i = 0; i < string.length; i += 1) {
+    hash = string.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  let color = '#';
+
+  for (i = 0; i < 3; i += 1) {
+    const value = (hash >> (i * 8)) & 0xff;
+    color += `00${value.toString(16)}`.slice(-2);
+  }
+  /* eslint-enable no-bitwise */
+  return color;
+}
+
+
+export function stringAvatar(name) {
+  return {
+    sx: {
+      bgcolor: stringToColor(name),
+    },
+    children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
+  };
+}