|
|
@@ -1,31 +1,17 @@
|
|
|
import * as React from 'react';
|
|
|
-import ListItem from '@mui/material/ListItem';
|
|
|
-import List from '@mui/material/List';
|
|
|
-
|
|
|
-import ListItemIcon from '@mui/material/ListItemIcon';
|
|
|
-import ListItemText from '@mui/material/ListItemText';
|
|
|
-import ListSubheader from '@mui/material/ListSubheader';
|
|
|
|
|
|
import { Nav } from 'react-bootstrap';
|
|
|
|
|
|
-import HomeIcon from '@mui/icons-material/Home'
|
|
|
-import WorkIcon from '@mui/icons-material/Work';
|
|
|
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
|
|
|
-import PeopleAltIcon from '@mui/icons-material/PeopleAlt';
|
|
|
-import HistoryIcon from '@mui/icons-material/History';
|
|
|
-import EqualizerIcon from '@mui/icons-material/Equalizer';
|
|
|
-import FingerprintIcon from '@mui/icons-material/Fingerprint';
|
|
|
-
|
|
|
-import MiscellaneousServicesIcon from '@mui/icons-material/MiscellaneousServices';
|
|
|
+import {
|
|
|
+ Home, Fingerprint, History, MiscellaneousServices ,
|
|
|
+ Work, VisibilityOff, PeopleAlt, Equalizer,
|
|
|
+ OndemandVideo, SupportAgent, Star,
|
|
|
+ ExpandLess, ExpandMore
|
|
|
+} from '@mui/icons-material/'
|
|
|
|
|
|
-import OndemandVideoIcon from '@mui/icons-material/OndemandVideo';
|
|
|
-import StarIcon from '@mui/icons-material/Star';
|
|
|
-import SupportAgentIcon from '@mui/icons-material/SupportAgent';
|
|
|
|
|
|
-import Collapse from '@mui/material/Collapse';
|
|
|
-import ExpandLess from '@mui/icons-material/ExpandLess';
|
|
|
-import ExpandMore from '@mui/icons-material/ExpandMore';
|
|
|
import { useNavigate, useResolvedPath, useMatch } from 'react-router-dom'
|
|
|
+import { Collapse,ListItem, List ,ListItemIcon,ListItemText,ListSubheader } from '@mui/material/'
|
|
|
|
|
|
function NavItem (props) {
|
|
|
|
|
|
@@ -33,10 +19,12 @@ function NavItem (props) {
|
|
|
let resolved = useResolvedPath(props.route);
|
|
|
let match = useMatch({ path: resolved.pathname, end: true });
|
|
|
|
|
|
+ console.log(match,typeof(match))
|
|
|
+
|
|
|
return(
|
|
|
<ListItem
|
|
|
sx={{ color : '#25344f'}}
|
|
|
- selected={match}
|
|
|
+ selected={ match && typeof(match) === "object" }
|
|
|
onClick={() => navigate(props.route) }
|
|
|
button
|
|
|
>
|
|
|
@@ -59,6 +47,11 @@ function NavItem (props) {
|
|
|
|
|
|
export const MainListItems = (props) => {
|
|
|
|
|
|
+ /* TODO
|
|
|
+ *
|
|
|
+ *
|
|
|
+ */
|
|
|
+
|
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
|
|
const showPruebas = () => {
|
|
|
@@ -73,16 +66,15 @@ export const MainListItems = (props) => {
|
|
|
|
|
|
<ListSubheader inset>MENÚ</ListSubheader>
|
|
|
|
|
|
- <NavItem icon={<HomeIcon/>} title="Inicio" route="home" />
|
|
|
- <NavItem icon={<WorkIcon/>} title="Puestos" route="puestos" />
|
|
|
- <NavItem icon={<VisibilityOffIcon/>} index={2} title="Contraseñas" route="contrasenas" />
|
|
|
- <NavItem icon={<PeopleAltIcon/>} title="Expedientes" route="expedientes" />
|
|
|
- <NavItem icon={<EqualizerIcon/>} title="Resultados" route="resultados" />
|
|
|
+ <NavItem icon={<Home/>} title="Inicio" route="home" />
|
|
|
+ <NavItem icon={<Work/>} title="Puestos" route="puestos" />
|
|
|
+ <NavItem icon={<VisibilityOff/>} title="Contraseñas" route="contrasenas" />
|
|
|
+ <NavItem icon={<PeopleAlt/>} title="Expedientes" route="expedientes" />
|
|
|
+ <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
|
|
|
|
|
|
- {/*<ListItem selected={false} onClick={showPruebas}>*/}
|
|
|
- <ListItem onClick={showPruebas}>
|
|
|
+ <ListItem selected={open} onClick={showPruebas}>
|
|
|
<ListItemIcon>
|
|
|
- <FingerprintIcon />
|
|
|
+ <Fingerprint />
|
|
|
</ListItemIcon>
|
|
|
|
|
|
|
|
|
@@ -111,8 +103,8 @@ export const MainListItems = (props) => {
|
|
|
</List>
|
|
|
</Collapse>
|
|
|
|
|
|
- <NavItem icon={<MiscellaneousServicesIcon/>} title="Configuraciones" route="configuraciones" />
|
|
|
- <NavItem icon={<HistoryIcon/>} title="Historial" route="historial" />
|
|
|
+ <NavItem icon={<MiscellaneousServices/>} title="Configuraciones" route="configuraciones" />
|
|
|
+ <NavItem icon={<History/>} title="Historial" route="historial" />
|
|
|
</List>
|
|
|
)
|
|
|
};
|
|
|
@@ -120,8 +112,8 @@ export const MainListItems = (props) => {
|
|
|
export const secondaryListItems = (
|
|
|
<Nav>
|
|
|
<ListSubheader inset>EXTRAS</ListSubheader>
|
|
|
- <NavItem selected={false} icon={<StarIcon/>} title="Elementos" route="/work" />
|
|
|
- <NavItem selected={false} icon={<OndemandVideoIcon/>} title="Tutoriales" route="/work" />
|
|
|
- <NavItem selected={false} icon={<SupportAgentIcon/>} title="Asistencia Técnica" route="/work" />
|
|
|
+ <NavItem icon={<Star/>} title="Elementos" route="/work" />
|
|
|
+ <NavItem icon={<OndemandVideo/>} title="Tutoriales" route="/worktwo" />
|
|
|
+ <NavItem icon={<SupportAgent/>} title="Asistencia Técnica" route="/worktree" />
|
|
|
</Nav>
|
|
|
);
|