|
@@ -1,9 +1,9 @@
|
1
|
1
|
import React from 'react';
|
2
|
2
|
import { ThemeProvider } from '@mui/material/styles';
|
3
|
3
|
|
4
|
|
-import {
|
5
|
|
- Menu,MenuItem,Container,Avatar, Badge,IconButton,Divider,
|
6
|
|
- Typography, List, Toolbar, Box, CssBaseline,useMediaQuery as Size,
|
|
4
|
+import {
|
|
5
|
+ Menu, MenuItem, Container, Avatar, Badge, IconButton, Divider,
|
|
6
|
+ Typography, List, Toolbar, Box, CssBaseline, useMediaQuery as Size,
|
7
|
7
|
} from '@mui/material'
|
8
|
8
|
|
9
|
9
|
import {
|
|
@@ -15,7 +15,7 @@ import useAuth from '../Auth/useAuth';
|
15
|
15
|
import Logo from '../Images/logo.png';
|
16
|
16
|
import ProfilePicture from '../Images/man.png';
|
17
|
17
|
|
18
|
|
-import { Outlet, useNavigate} from "react-router-dom";
|
|
18
|
+import { Outlet, useNavigate } from "react-router-dom";
|
19
|
19
|
import { MenuMovil } from '../Components/Navigation/MenuMovil';
|
20
|
20
|
import Footer from "../Components/Footer";
|
21
|
21
|
|
|
@@ -26,6 +26,7 @@ import { MainListItems, SecondaryListItems } from '../Components/Navigation/list
|
26
|
26
|
function DashboardContent() {
|
27
|
27
|
|
28
|
28
|
const [open, setOpen] = React.useState(false);
|
|
29
|
+
|
29
|
30
|
const isMovil = Size('(min-width:770px)');
|
30
|
31
|
const auth = useAuth();
|
31
|
32
|
const navigate = useNavigate()
|
|
@@ -46,56 +47,56 @@ function DashboardContent() {
|
46
|
47
|
console.log('cerrando session')
|
47
|
48
|
auth.logout();
|
48
|
49
|
navigate('/')
|
49
|
|
- }
|
|
50
|
+ }
|
50
|
51
|
|
51
|
52
|
return (
|
52
|
53
|
<ThemeProvider theme={mdTheme}>
|
53
|
54
|
|
54
|
|
- <MenuMovil
|
|
55
|
+ <MenuMovil
|
55
|
56
|
anchor={anchorElMovil}
|
56
|
57
|
control={setAnchorElMov} />
|
57
|
58
|
|
58
|
59
|
<Box sx={{ display: 'flex' }}>
|
59
|
|
- <CssBaseline/>
|
60
|
|
- <AppBar style={{ backgroundColor : '#fff', boxShadow : 'None' }} position="absolute" open={ !isMovil ? open : false}>
|
61
|
|
- <Toolbar sx={{ pr: '24px' , borderBottom : "1px solid #ec5e69"}} >
|
|
60
|
+ <CssBaseline />
|
|
61
|
+ <AppBar style={{ backgroundColor: '#fff', boxShadow: 'None' }} position="absolute" open={!isMovil ? open : false}>
|
|
62
|
+ <Toolbar sx={{ pr: '24px', borderBottom: "1px solid #ec5e69" }} >
|
62
|
63
|
|
63
|
64
|
{/* boton para activar navegacion */}
|
64
|
|
- <IconButton
|
65
|
|
- edge="start"
|
66
|
|
- color="inherit"
|
67
|
|
- aria-label="open drawer"
|
68
|
|
- onClick={ !isMovil ? MenuResponsive : toggleDrawer }
|
69
|
|
- sx={{ marginRight: '36px', ...( !isMovil && open && { display: 'none' }), }} >
|
70
|
|
- <MenuIcon style={{
|
|
65
|
+ <IconButton
|
|
66
|
+ edge="start"
|
|
67
|
+ color="inherit"
|
|
68
|
+ aria-label="open drawer"
|
|
69
|
+ onClick={!isMovil ? MenuResponsive : toggleDrawer}
|
|
70
|
+ sx={{ marginRight: '36px', ...(!isMovil && open && { display: 'none' }), }} >
|
|
71
|
+ <MenuIcon style={{
|
71
|
72
|
background: '#ec5e69',
|
72
|
73
|
fontSize: "40",
|
73
|
74
|
color: "#fff"
|
74
|
|
- }}/>
|
|
75
|
+ }} />
|
75
|
76
|
</IconButton>
|
76
|
77
|
|
77
|
78
|
<Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
|
78
|
79
|
{
|
79
|
|
- !isMovil && open ? (
|
80
|
|
- <React.Fragment>
|
81
|
|
-
|
82
|
|
- <IconButton onClick={toggleDrawer}>
|
83
|
|
- <MenuIcon />
|
84
|
|
- </IconButton>
|
85
|
|
-
|
86
|
|
- <IconButton onClick={ (event) => event.target.requestFullscreen() }>
|
87
|
|
- <FullscreenIcon style={{ paddinLeft : 15 }}/>
|
88
|
|
- </IconButton>
|
89
|
|
- </React.Fragment>
|
90
|
|
- ) : undefined
|
91
|
|
- }
|
|
80
|
+ !isMovil && open ? (
|
|
81
|
+ <React.Fragment>
|
|
82
|
+
|
|
83
|
+ <IconButton onClick={toggleDrawer}>
|
|
84
|
+ <MenuIcon />
|
|
85
|
+ </IconButton>
|
|
86
|
+
|
|
87
|
+ <IconButton onClick={(event) => event.target.requestFullscreen()}>
|
|
88
|
+ <FullscreenIcon style={{ paddinLeft: 15 }} />
|
|
89
|
+ </IconButton>
|
|
90
|
+ </React.Fragment>
|
|
91
|
+ ) : undefined
|
|
92
|
+ }
|
92
|
93
|
</Typography>
|
93
|
94
|
|
94
|
95
|
|
95
|
96
|
<Box sx={{ display: { xs: 'none', md: 'flex' } }}>
|
96
|
97
|
<IconButton size="large" aria-label="show 4 new mails" color="inherit">
|
97
|
98
|
<Badge badgeContent={4} color="error">
|
98
|
|
- <MailIcon style={{ color : '#212529' }} />
|
|
99
|
+ <MailIcon style={{ color: '#212529' }} />
|
99
|
100
|
</Badge>
|
100
|
101
|
</IconButton>
|
101
|
102
|
<IconButton
|
|
@@ -103,7 +104,7 @@ function DashboardContent() {
|
103
|
104
|
aria-label="show 17 new notifications"
|
104
|
105
|
color="inherit">
|
105
|
106
|
<Badge badgeContent={17} color="error">
|
106
|
|
- <NotificationsIcon style={{ color : '#212529' }}/>
|
|
107
|
+ <NotificationsIcon style={{ color: '#212529' }} />
|
107
|
108
|
</Badge>
|
108
|
109
|
</IconButton>
|
109
|
110
|
|
|
@@ -116,7 +117,7 @@ function DashboardContent() {
|
116
|
117
|
aria-expanded={open_profile ? 'true' : undefined}
|
117
|
118
|
onClick={handleClick}
|
118
|
119
|
color="inherit" >
|
119
|
|
- <Avatar alt="profile picture" src={ProfilePicture} />
|
|
120
|
+ <Avatar alt="profile picture" src={ProfilePicture} />
|
120
|
121
|
</IconButton>
|
121
|
122
|
<Menu
|
122
|
123
|
id="basic-menu"
|
|
@@ -124,9 +125,9 @@ function DashboardContent() {
|
124
|
125
|
open={open_profile}
|
125
|
126
|
onClose={handleClose}
|
126
|
127
|
MenuListProps={{ 'aria-labelledby': 'basic-button', }}>
|
127
|
|
- <MenuItem onClick={() => navigate('dashboard/perfil') }>Mi Cuenta</MenuItem>
|
|
128
|
+ <MenuItem onClick={() => navigate('dashboard/perfil')}>Mi Cuenta</MenuItem>
|
128
|
129
|
<MenuItem onClick={() => console.log('dashboard/perfil')}>Configuraciones</MenuItem>
|
129
|
|
- <MenuItem onClick={CerrarSession}>Logout</MenuItem>
|
|
130
|
+ <MenuItem onClick={CerrarSession}>Cerrar Sesión</MenuItem>
|
130
|
131
|
</Menu>
|
131
|
132
|
</Box>
|
132
|
133
|
</Toolbar>
|
|
@@ -139,9 +140,9 @@ function DashboardContent() {
|
139
|
140
|
justifyContent: 'flex-start',
|
140
|
141
|
px: [1]
|
141
|
142
|
}} >
|
142
|
|
- <div style={{ flat : 'righ' }} className="sidebar-header">
|
|
143
|
+ <div style={{ flat: 'righ' }} className="sidebar-header">
|
143
|
144
|
<div className="width_img">
|
144
|
|
- <img src={Logo} alt="pruebas psicometricas"/>
|
|
145
|
+ <img src={Logo} alt="pruebas psicometricas" />
|
145
|
146
|
</div>
|
146
|
147
|
</div>
|
147
|
148
|
</Toolbar>
|
|
@@ -154,8 +155,8 @@ function DashboardContent() {
|
154
|
155
|
{SecondaryListItems}
|
155
|
156
|
</List>
|
156
|
157
|
</Drawer>
|
157
|
|
- <Container maxWidth="lg" sx={{ mt: 2 , mb: 2 }}>
|
158
|
|
- <Outlet />
|
|
158
|
+ <Container maxWidth="lg" sx={{ mt: 2, mb: 2 }}>
|
|
159
|
+ <Outlet />
|
159
|
160
|
<Footer />
|
160
|
161
|
</Container>
|
161
|
162
|
</Box>
|