|
@@ -1,31 +1,17 @@
|
1
|
1
|
import * as React from 'react';
|
2
|
|
-import ListItem from '@mui/material/ListItem';
|
3
|
|
-import List from '@mui/material/List';
|
4
|
|
-
|
5
|
|
-import ListItemIcon from '@mui/material/ListItemIcon';
|
6
|
|
-import ListItemText from '@mui/material/ListItemText';
|
7
|
|
-import ListSubheader from '@mui/material/ListSubheader';
|
8
|
2
|
|
9
|
3
|
import { Nav } from 'react-bootstrap';
|
10
|
4
|
|
11
|
|
-import HomeIcon from '@mui/icons-material/Home'
|
12
|
|
-import WorkIcon from '@mui/icons-material/Work';
|
13
|
|
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
|
14
|
|
-import PeopleAltIcon from '@mui/icons-material/PeopleAlt';
|
15
|
|
-import HistoryIcon from '@mui/icons-material/History';
|
16
|
|
-import EqualizerIcon from '@mui/icons-material/Equalizer';
|
17
|
|
-import FingerprintIcon from '@mui/icons-material/Fingerprint';
|
18
|
|
-
|
19
|
|
-import MiscellaneousServicesIcon from '@mui/icons-material/MiscellaneousServices';
|
|
5
|
+import {
|
|
6
|
+ Home, Fingerprint, History, MiscellaneousServices ,
|
|
7
|
+ Work, VisibilityOff, PeopleAlt, Equalizer,
|
|
8
|
+ OndemandVideo, SupportAgent, Star,
|
|
9
|
+ ExpandLess, ExpandMore
|
|
10
|
+} from '@mui/icons-material/'
|
20
|
11
|
|
21
|
|
-import OndemandVideoIcon from '@mui/icons-material/OndemandVideo';
|
22
|
|
-import StarIcon from '@mui/icons-material/Star';
|
23
|
|
-import SupportAgentIcon from '@mui/icons-material/SupportAgent';
|
24
|
12
|
|
25
|
|
-import Collapse from '@mui/material/Collapse';
|
26
|
|
-import ExpandLess from '@mui/icons-material/ExpandLess';
|
27
|
|
-import ExpandMore from '@mui/icons-material/ExpandMore';
|
28
|
13
|
import { useNavigate, useResolvedPath, useMatch } from 'react-router-dom'
|
|
14
|
+import { Collapse,ListItem, List ,ListItemIcon,ListItemText,ListSubheader } from '@mui/material/'
|
29
|
15
|
|
30
|
16
|
function NavItem (props) {
|
31
|
17
|
|
|
@@ -33,10 +19,12 @@ function NavItem (props) {
|
33
|
19
|
let resolved = useResolvedPath(props.route);
|
34
|
20
|
let match = useMatch({ path: resolved.pathname, end: true });
|
35
|
21
|
|
|
22
|
+ console.log(match,typeof(match))
|
|
23
|
+
|
36
|
24
|
return(
|
37
|
25
|
<ListItem
|
38
|
26
|
sx={{ color : '#25344f'}}
|
39
|
|
- selected={match}
|
|
27
|
+ selected={ match && typeof(match) === "object" }
|
40
|
28
|
onClick={() => navigate(props.route) }
|
41
|
29
|
button
|
42
|
30
|
>
|
|
@@ -59,6 +47,11 @@ function NavItem (props) {
|
59
|
47
|
|
60
|
48
|
export const MainListItems = (props) => {
|
61
|
49
|
|
|
50
|
+ /* TODO
|
|
51
|
+ *
|
|
52
|
+ *
|
|
53
|
+ */
|
|
54
|
+
|
62
|
55
|
const [open, setOpen] = React.useState(false);
|
63
|
56
|
|
64
|
57
|
const showPruebas = () => {
|
|
@@ -73,16 +66,15 @@ export const MainListItems = (props) => {
|
73
|
66
|
|
74
|
67
|
<ListSubheader inset>MENÚ</ListSubheader>
|
75
|
68
|
|
76
|
|
- <NavItem icon={<HomeIcon/>} title="Inicio" route="home" />
|
77
|
|
- <NavItem icon={<WorkIcon/>} title="Puestos" route="puestos" />
|
78
|
|
- <NavItem icon={<VisibilityOffIcon/>} index={2} title="Contraseñas" route="contrasenas" />
|
79
|
|
- <NavItem icon={<PeopleAltIcon/>} title="Expedientes" route="expedientes" />
|
80
|
|
- <NavItem icon={<EqualizerIcon/>} title="Resultados" route="resultados" />
|
|
69
|
+ <NavItem icon={<Home/>} title="Inicio" route="home" />
|
|
70
|
+ <NavItem icon={<Work/>} title="Puestos" route="puestos" />
|
|
71
|
+ <NavItem icon={<VisibilityOff/>} title="Contraseñas" route="contrasenas" />
|
|
72
|
+ <NavItem icon={<PeopleAlt/>} title="Expedientes" route="expedientes" />
|
|
73
|
+ <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
|
81
|
74
|
|
82
|
|
- {/*<ListItem selected={false} onClick={showPruebas}>*/}
|
83
|
|
- <ListItem onClick={showPruebas}>
|
|
75
|
+ <ListItem selected={open} onClick={showPruebas}>
|
84
|
76
|
<ListItemIcon>
|
85
|
|
- <FingerprintIcon />
|
|
77
|
+ <Fingerprint />
|
86
|
78
|
</ListItemIcon>
|
87
|
79
|
|
88
|
80
|
|
|
@@ -111,8 +103,8 @@ export const MainListItems = (props) => {
|
111
|
103
|
</List>
|
112
|
104
|
</Collapse>
|
113
|
105
|
|
114
|
|
- <NavItem icon={<MiscellaneousServicesIcon/>} title="Configuraciones" route="configuraciones" />
|
115
|
|
- <NavItem icon={<HistoryIcon/>} title="Historial" route="historial" />
|
|
106
|
+ <NavItem icon={<MiscellaneousServices/>} title="Configuraciones" route="configuraciones" />
|
|
107
|
+ <NavItem icon={<History/>} title="Historial" route="historial" />
|
116
|
108
|
</List>
|
117
|
109
|
)
|
118
|
110
|
};
|
|
@@ -120,8 +112,8 @@ export const MainListItems = (props) => {
|
120
|
112
|
export const secondaryListItems = (
|
121
|
113
|
<Nav>
|
122
|
114
|
<ListSubheader inset>EXTRAS</ListSubheader>
|
123
|
|
- <NavItem selected={false} icon={<StarIcon/>} title="Elementos" route="/work" />
|
124
|
|
- <NavItem selected={false} icon={<OndemandVideoIcon/>} title="Tutoriales" route="/work" />
|
125
|
|
- <NavItem selected={false} icon={<SupportAgentIcon/>} title="Asistencia Técnica" route="/work" />
|
|
115
|
+ <NavItem icon={<Star/>} title="Elementos" route="/work" />
|
|
116
|
+ <NavItem icon={<OndemandVideo/>} title="Tutoriales" route="/worktwo" />
|
|
117
|
+ <NavItem icon={<SupportAgent/>} title="Asistencia Técnica" route="/worktree" />
|
126
|
118
|
</Nav>
|
127
|
119
|
);
|