pre is movil validation

src/Components/Dashboard.js

@@ -3,25 +3,27 @@ import { ThemeProvider, styled, createTheme } from '@mui/material/styles';
 
 import {
     Container, IconButton, Divider,
-    Typography, List, Toolbar, Box, CssBaseline, useMediaQuery as Size,
+    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,
 } from '@mui/icons-material'
 
-// import Logo from '../Images/logo.png';
 import Logo from '../Images/evaluacion.jpeg';
 
-import { Outlet } from "react-router-dom";
+import { Outlet, useNavigate } from "react-router-dom";
 import { MenuMovil } from '../Components/Navigation/MenuMovil';
 import Footer from "../Components/Footer";
 
-// 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'
+import useAuth from '../Auth/useAuth.js'
+import ProfilePicture from '../Images/man.png';
 
 const drawerWidth = 240;
 const mdTheme = createTheme();
@@ -78,7 +80,22 @@ function DashboardContent() {
     const [open, setOpen] = React.useState(false);
 
     const isMovil = Size('(min-width:770px)');
-    const navbar = React.useRef(null);
+    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) => {
+        console.log('handle click')
+        console.log(event)
+        setAnchorEl(event.currentTarget);
+    }
+    const handleClose = () => setAnchorEl(null)
 
     const toggleDrawer = () => {
         setOpen(!open);
@@ -99,7 +116,6 @@ function DashboardContent() {
             <Box sx={{ display: 'flex' }}>
                 <AppBar style={{ backgroundColor: '#fff', boxShadow: 'None' }} position="absolute" open={open}>
                     <Toolbar sx={{ pr: '24px', borderBottom: "1px solid #ec5e69" }} >
-
                         <IconButton
                             edge="start"
                             color="inherit"
@@ -112,14 +128,13 @@ function DashboardContent() {
                                 color: "#fff"
                             }} />
                         </IconButton>
-
                         <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
                             {
                                 open ? (
                                     <React.Fragment>
 
                                         <IconButton onClick={toggleDrawer}>
-                                            <MenuIcon />
+                                            <LeftKey/>
                                         </IconButton>
 
                                         <IconButton onClick={(event) => event.target.requestFullscreen()}>
@@ -129,7 +144,48 @@ function DashboardContent() {
                                 ) : undefined
                             }
                         </Typography>
-                        <UserOptions/>
+
+                        <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} >

src/Components/Navigation/UserOptions.jsx

@@ -21,10 +21,12 @@ export function UserOptions(){
         navigate('/')
     }
 
-
     const [anchorEl, setAnchorEl] = React.useState(null);
     const open_profile = Boolean(anchorEl);
-    const handleClick = (event) => setAnchorEl(event.currentTarget);
+    const handleClick = (event) => {
+        console.log('handle click')
+        setAnchorEl(event.currentTarget);
+    }
     const handleClose = () => setAnchorEl(null)
 
     return(
@@ -42,8 +44,6 @@ export function UserOptions(){
                     <NotificationsIcon style={{ color: '#212529' }} />
                 </Badge>
             </IconButton>
-
-
             <IconButton
                 size="small"
                 edge="end"