user options components

src/Components/Dashboard.js

@@ -1,41 +1,82 @@
 import React from 'react';
-import { ThemeProvider } from '@mui/material/styles';
+import { ThemeProvider, styled } from '@mui/material/styles';
 
 import {
-    Menu, MenuItem, Container, Avatar, Badge, IconButton, Divider,
+    Container, IconButton, Divider,
     Typography, List, Toolbar, Box, CssBaseline, useMediaQuery as Size,
 } from '@mui/material'
 
 import {
-    Mail as MailIcon, Notifications as NotificationsIcon, Fullscreen as FullscreenIcon,
+    Fullscreen as FullscreenIcon,
     Menu as MenuIcon,
 } from '@mui/icons-material'
 
-import useAuth from '../Auth/useAuth';
 import Logo from '../Images/logo.png';
-import ProfilePicture from '../Images/man.png';
 
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet } from "react-router-dom";
 import { MenuMovil } from '../Components/Navigation/MenuMovil';
 import Footer from "../Components/Footer";
 
-import { mdTheme } from '../Utils/theme'
-import { Drawer, AppBar } from "../Components/Navigation/AppBar"
+import { psicotheme } from '../Utils/theme'
+import { Drawer as MuiDrawer, AppBar as MuiAppBar } from "../Components/Navigation/AppBar"
 import { MainListItems, SecondaryListItems } from '../Components/Navigation/listItems';
+import { UserOptions } from '../Components/Navigation/UserOptions'
+
+const drawerWidth = 240;
+
+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),
+                },
+            }),
+        },
+    }),
+);
+
 
 function DashboardContent() {
 
     const [open, setOpen] = React.useState(false);
 
     const isMovil = Size('(min-width:770px)');
-    const auth = useAuth();
-    const navigate = useNavigate()
 
     const toggleDrawer = () => setOpen(!open);
-    const [anchorEl, setAnchorEl] = React.useState(null);
-    const open_profile = Boolean(anchorEl);
-    const handleClick = (event) => setAnchorEl(event.currentTarget);
-    const handleClose = () => setAnchorEl(null)
 
     const [anchorElMovil, setAnchorElMov] = React.useState(false);
     const MenuResponsive = () => {
@@ -43,14 +84,9 @@ function DashboardContent() {
         setAnchorElMov(!anchorElMovil);
     }
 
-    const CerrarSession = () => {
-        console.log('cerrando session')
-        auth.logout();
-        navigate('/')
-    }
 
     return (
-        <ThemeProvider theme={mdTheme}>
+        <ThemeProvider theme={psicotheme}>
 
             <MenuMovil
                 anchor={anchorElMovil}
@@ -91,45 +127,7 @@ function DashboardContent() {
                                 ) : 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="profile picture" src={ProfilePicture} />
-                            </IconButton>
-                            <Menu
-                                id="basic-menu"
-                                anchorEl={anchorEl}
-                                open={open_profile}
-                                onClose={handleClose}
-                                MenuListProps={{ 'aria-labelledby': 'basic-button', }}>
-                                <MenuItem onClick={() => navigate('dashboard/perfil')}>Mi Cuenta</MenuItem>
-                                <MenuItem onClick={() => console.log('dashboard/perfil')}>Configuraciones</MenuItem>
-                                <MenuItem onClick={CerrarSession}>Cerrar Sesión</MenuItem>
-                            </Menu>
-                        </Box>
+                        <UserOptions/>
                     </Toolbar>
                 </AppBar>
                 <Drawer variant="permanent" open={open}>

src/Components/Navigation/UserOptions.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import {
+    Box, Badge, IconButton, Menu, Avatar, MenuItem
+} from '@mui/material'
+
+import {
+    Mail as MailIcon, Notifications as NotificationsIcon,
+} from '@mui/icons-material'
+
+import useAuth from '../../Auth/useAuth.js';
+import { useNavigate } from "react-router-dom";
+import ProfilePicture from '../../Images/man.png';
+
+export function UserOptions(){
+
+    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)
+
+    return(
+        <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="profile picture" src={ProfilePicture} />
+            </IconButton>
+            <Menu
+                id="basic-menu"
+                anchorEl={anchorEl}
+                pen={open_profile}
+                onClose={handleClose}
+                MenuListProps={{ 'aria-labelledby': 'basic-button', }}>
+                <MenuItem onClick={() => navigate('dashboard/perfil')}>Mi Cuenta</MenuItem>
+                <MenuItem onClick={() => console.log('dashboard/perfil')}>Configuraciones</MenuItem>
+                <MenuItem onClick={CerrarSession}>Cerrar Sesión</MenuItem>
+            </Menu>
+        </Box>
+    )
+}

src/Components/User.jsx

@@ -1,23 +1,25 @@
 import * as React from 'react';
 
-import { 
-    Mail as MailIcon, Menu as MenuIcon,
-    MoveToInbox as InboxIcon
-} from '@mui/icons-material'
-
-import { 
-    Outlet, 
+import {
+    Outlet,
     // useNavigate 
 } from "react-router-dom";
 
-import { 
+import {
     AppBar, Box, CssBaseline, Divider, Drawer,
-    IconButton,List, ListItem, ListItemButton, ListItemIcon, ListItemText,
-    Toolbar, Typography, Container
+    IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText,
+    Toolbar, Typography, Container, Badge,
+    MenuItem, Avatar,Menu
 } from '@mui/material'
 
-import Footer from "../Components/Footer.js";
+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';
 
 
@@ -39,11 +41,11 @@ export function User(props) {
             <Toolbar />
             <Divider />
             <List>
-                {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+                {['Mi perfil', 'Pruebas', 'Configuracion', 'Ayuda'].map((text, index) => (
                     <ListItem key={text} disablePadding>
                         <ListItemButton>
                             <ListItemIcon>
-                                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+                                {index % 2 === 0 ? <MailIcon /> : <NotificationsIcon />}
                             </ListItemIcon>
                             <ListItemText primary={text} />
                         </ListItemButton>
@@ -56,7 +58,7 @@ export function User(props) {
                     <ListItem key={text} disablePadding>
                         <ListItemButton>
                             <ListItemIcon>
-                                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+                                {index % 2 === 0 ? <MailIcon /> : <NotificationsIcon />}
                             </ListItemIcon>
                             <ListItemText primary={text} />
                         </ListItemButton>
@@ -89,9 +91,45 @@ export function User(props) {
                         <MenuIcon />
                     </IconButton>
                     <Typography variant="h6" noWrap component="div">
-                        Pruebas Psicometricas
+                        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"

src/Utils/theme.js

@@ -1,7 +1,7 @@
 import { createTheme } from '@mui/material/styles';
 import { colors } from '@mui/material'
 
-export const mdTheme = createTheme({
+export const psicotheme = createTheme({
     palette: {
         primary: {
             main: colors.red[500],