start mockup refix candi

src/Components/HomeUser/TestCard.jsx

@@ -9,8 +9,6 @@ import QA from '../../Images/puesto.jpg'
 export function TestCard(props) {
 
     let { test } = props;
-    console.log("TEST :: ", test)
-
     return (
         <Card className="card_test" elevation={0} sx={{ maxWidth: 500, maxHeight : 500 }}>
             <CardActionArea>

src/Components/Navigation/listItems.js

@@ -7,7 +7,8 @@ import { useNavigate, useResolvedPath, useMatch } from 'react-router-dom'
 import { Collapse,ListItem, List ,ListItemIcon,ListItemText,ListSubheader } from '@mui/material/'
 
 import { 
-    MainItems, ExtraItems, PruebaItems, TxTStyle
+    MainItems, ExtraItems, PruebaItems, TxTStyle,
+    UserItems
 } from '../../Utils/MenuItems'
 
 
@@ -85,6 +86,22 @@ export const MainListItems = (props) =>  {
     )
 };
 
+export const UserListItems = (props) =>  {
+
+    const [open, setOpen] = React.useState(false);
+
+    return(
+        <List>
+            <ListSubheader inset>MENÚ</ListSubheader>
+            {
+                UserItems.map( ({ icon, title, route}, i) =>  (
+                    <NavItem key={i} icon={icon} title={title} route={route} />
+                ))
+            }
+        </List>
+    )
+};
+
 export const SecondaryListItems = (
     <Nav>
         <ListSubheader inset>EXTRAS</ListSubheader>

src/Components/User.jsx

@@ -1,180 +1,241 @@
-import * as React from 'react';
+// import * as React from 'react';
+//
+// import {
+//     Outlet,
+// } from "react-router-dom";
+//
+// import {
+//     AppBar, Box, CssBaseline, Divider, Drawer,
+//     IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText,
+//     Toolbar, Typography, Container, Badge,
+//     MenuItem, Avatar,Menu
+// } from '@mui/material'
+//
+// import {
+//     Mail as MailIcon, Notifications as NotificationsIcon,
+//     Menu as MenuIcon,
+// } from '@mui/icons-material'
+//
+//
+// import Footer from "../Components/Footer.js";
+// import ProfilePicture from '../Images/man.png';
+// import useAuth from '../Auth/useAuth';
 
-import {
-    Outlet,
-    // useNavigate 
-} from "react-router-dom";
+import React from 'react';
+import { ThemeProvider, styled, createTheme } from '@mui/material/styles';
+import '../Css/user.css'
 
 import {
-    AppBar, Box, CssBaseline, Divider, Drawer,
-    IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText,
-    Toolbar, Typography, Container, Badge,
-    MenuItem, Avatar,Menu
+    Container, IconButton, Divider,
+    Typography, List, Toolbar,useMediaQuery as Size,
+    Box, Badge, Menu, Avatar, MenuItem
 } from '@mui/material'
 
 import {
-    Mail as MailIcon, Notifications as NotificationsIcon,
+    Fullscreen as FullscreenIcon,
     Menu as MenuIcon,
+    KeyboardDoubleArrowLeft as LeftKey,
+    Mail as MailIcon, Notifications as NotificationsIcon,
 } from '@mui/icons-material'
 
+import Logo from '../Images/evaluacion.jpeg';
 
-import Footer from "../Components/Footer.js";
-import ProfilePicture from '../Images/man.png';
-// import useAuth from '../Auth/useAuth';
+import { Outlet, useNavigate } from "react-router-dom";
+import { MenuMovil } from '../Components/Navigation/MenuMovil';
+import Footer from "../Components/Footer";
 
+import { Drawer as MuiDrawer, AppBar as MuiAppBar } from "../Components/Navigation/AppBar"
+import { UserListItems, SecondaryListItems } from '../Components/Navigation/listItems';
+import useAuth from '../Auth/useAuth.js'
+import ProfilePicture from '../Images/man.png';
 
 const drawerWidth = 240;
-
-export function User(props) {
-
-    const { window } = props;
-    const [mobileOpen, setMobileOpen] = React.useState(false);
-
-    const handleDrawerToggle = () => {
-        setMobileOpen(!mobileOpen);
-    };
-
-    // const auth = useAuth();
-
-    const drawer = (
-        <div>
-            <Toolbar />
-            <Divider />
-            <List>
-                {['Mi perfil', 'Pruebas', 'Configuracion', 'Ayuda'].map((text, index) => (
-                    <ListItem key={text} disablePadding>
-                        <ListItemButton>
-                            <ListItemIcon>
-                                {index % 2 === 0 ? <MailIcon /> : <NotificationsIcon />}
-                            </ListItemIcon>
-                            <ListItemText primary={text} />
-                        </ListItemButton>
-                    </ListItem>
-                ))}
-            </List>
-            <Divider />
-            <List>
-                {['All mail', 'Trash', 'Spam'].map((text, index) => (
-                    <ListItem key={text} disablePadding>
-                        <ListItemButton>
-                            <ListItemIcon>
-                                {index % 2 === 0 ? <MailIcon /> : <NotificationsIcon />}
-                            </ListItemIcon>
-                            <ListItemText primary={text} />
-                        </ListItemButton>
-                    </ListItem>
-                ))}
-            </List>
-        </div>
-    );
-
-    const container = window !== undefined ? () => window().document.body : undefined;
+const mdTheme = createTheme();
+
+const AppBar = styled(MuiAppBar, {
+    shouldForwardProp: (prop) => prop !== 'open',
+})(({ theme, open }) => ({
+    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.enteringScreen,
+        }),
+    }),
+}));
+
+
+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),
+                },
+            }),
+        },
+    }),
+);
+
+export function User() {
+
+    const [open, setOpen] = React.useState(false);
+
+    const isMovil = Size('(max-width:770px)');
+    const auth = useAuth();
+    const navigate = useNavigate()
+
+    const CerrarSession = () => {
+        auth.logout();
+        navigate('/')
+    }
+
+    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);
 
     return (
-        <Box sx={{ display: 'flex' }}>
-            <CssBaseline />
-            <AppBar
-                position="fixed"
-                sx={{
-                    width: { sm: `calc(100% - ${drawerWidth}px)` },
-                    ml: { sm: `${drawerWidth}px` },
-                }}
-            >
-                <Toolbar>
-                    <IconButton
-                        color="inherit"
-                        aria-label="open drawer"
-                        edge="start"
-                        onClick={handleDrawerToggle}
-                        sx={{ mr: 2, display: { sm: 'none' } }}
-                    >
-                        <MenuIcon />
-                    </IconButton>
-                    <Typography variant="h6" noWrap component="div">
-                        Pruebas Asignadas
-                    </Typography>
-                </Toolbar>
-
-                <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={'true'}
-                        color="inherit" >
-                        <Avatar alt="profile picture" src={ProfilePicture} />
-                    </IconButton>
-                    <Menu
-                        id="basic-menu"
-                        MenuListProps={{ 'aria-labelledby': 'basic-button', }}>
-                        <MenuItem >Mi Cuenta</MenuItem>
-                        <MenuItem >Configuraciones</MenuItem>
-                        <MenuItem >Cerrar Sesión</MenuItem>
-                    </Menu>
-                </Box>
-
-
-            </AppBar>
-            <Box
-                component="nav"
-                sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
-                aria-label="mailbox folders"
-            >
-                {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
-                <Drawer
-                    container={container}
-                    variant="temporary"
-                    open={mobileOpen}
-                    onClose={handleDrawerToggle}
-                    ModalProps={{
-                        keepMounted: true, // Better open performance on mobile.
-                    }}
-                    sx={{
-                        display: { xs: 'block', sm: 'none' },
-                        '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
-                    }}
-                >
-                    {drawer}
+        <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(--second)" }} >
+                        <IconButton
+                            name="navigation_icon_button"
+                            edge="start"
+                            color="inherit"
+                            aria-label="open drawer"
+                            // onClick={isMovil ? MenuResponsive : toggleDrawer}
+                            onClick={toggleDrawer}
+                            sx={{ marginRight: '36px', ...( open && { display: 'none' }), }} >
+                            <MenuIcon style={{
+                                background: 'var(--second)',
+                                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>
-                <Drawer
-                    variant="permanent"
-                    sx={{
-                        display: { xs: 'none', sm: 'block' },
-                        '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
-                    }}
-                    open
-                >
-                    {drawer}
-                </Drawer>
-            </Box>
-            <Box
-                component="main"
-                sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }} >
-
                 <Container maxWidth="lg" sx={{ mt: 2, mb: 2 }}>
                     <Outlet />
                     <Footer />
                 </Container>
-
-
             </Box>
-        </Box>
+        </ThemeProvider>
     );
+
 }
 

src/Css/user.css

@@ -0,0 +1,10 @@
+.Mui-selected{
+    /* se desahilito para la tabla de password */
+    color : #FFF !important;
+    background-color : var(--second) !important;
+    /* background-color : rgba(253, 75, 75, 0.1) !important; */
+}
+
+.MuiBadge-badge{
+    background-color : var(--second) !important;
+}

src/Pages/Logincs.jsx

@@ -96,7 +96,6 @@ export function LoginCs() {
         },
     });
 
-    
     React.useEffect(() => {
         if(auth.isLogged()){
             return navigate('/user/home')

src/Utils/MenuItems.js

@@ -2,10 +2,25 @@ import React from 'react';
 import {
     Home,Work, VisibilityOff, PeopleAlt,
     Equalizer, OndemandVideo, SupportAgent, Star,
-    MiscellaneousServices, History
+    MiscellaneousServices, History,
+    AssignmentTurnedIn
 } from '@mui/icons-material'
 
 
+export const UserItems = [
+    {
+        icon : <Home/>,
+        route : 'home',
+        title : 'Inicio'
+    },
+    {
+        icon : <AssignmentTurnedIn/>,
+        route : 'pruebas',
+        title : 'Pruebas'
+    },
+]
+
+
 export const MainItems = [
     {
         icon : <Home/>,