|
@@ -1,5 +1,5 @@
|
|
|
import React from 'react';
|
|
import React from 'react';
|
|
|
-import { ThemeProvider, styled } from '@mui/material/styles';
|
|
|
|
|
|
|
+import { ThemeProvider, styled, createTheme } from '@mui/material/styles';
|
|
|
|
|
|
|
|
import {
|
|
import {
|
|
|
Container, IconButton, Divider,
|
|
Container, IconButton, Divider,
|
|
@@ -11,18 +11,20 @@ import {
|
|
|
Menu as MenuIcon,
|
|
Menu as MenuIcon,
|
|
|
} from '@mui/icons-material'
|
|
} from '@mui/icons-material'
|
|
|
|
|
|
|
|
-import Logo from '../Images/logo.png';
|
|
|
|
|
|
|
+// import Logo from '../Images/logo.png';
|
|
|
|
|
+import Logo from '../Images/evaluacion.jpeg';
|
|
|
|
|
|
|
|
import { Outlet } from "react-router-dom";
|
|
import { Outlet } from "react-router-dom";
|
|
|
import { MenuMovil } from '../Components/Navigation/MenuMovil';
|
|
import { MenuMovil } from '../Components/Navigation/MenuMovil';
|
|
|
import Footer from "../Components/Footer";
|
|
import Footer from "../Components/Footer";
|
|
|
|
|
|
|
|
-import { psicotheme } from '../Utils/theme'
|
|
|
|
|
|
|
+// import { psicotheme } from '../Utils/theme'
|
|
|
import { Drawer as MuiDrawer, AppBar as MuiAppBar } from "../Components/Navigation/AppBar"
|
|
import { Drawer as MuiDrawer, AppBar as MuiAppBar } from "../Components/Navigation/AppBar"
|
|
|
import { MainListItems, SecondaryListItems } from '../Components/Navigation/listItems';
|
|
import { MainListItems, SecondaryListItems } from '../Components/Navigation/listItems';
|
|
|
import { UserOptions } from '../Components/Navigation/UserOptions'
|
|
import { UserOptions } from '../Components/Navigation/UserOptions'
|
|
|
|
|
|
|
|
const drawerWidth = 240;
|
|
const drawerWidth = 240;
|
|
|
|
|
+const mdTheme = createTheme();
|
|
|
|
|
|
|
|
const AppBar = styled(MuiAppBar, {
|
|
const AppBar = styled(MuiAppBar, {
|
|
|
shouldForwardProp: (prop) => prop !== 'open',
|
|
shouldForwardProp: (prop) => prop !== 'open',
|
|
@@ -43,7 +45,8 @@ const AppBar = styled(MuiAppBar, {
|
|
|
}));
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
|
|
-const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
|
|
|
|
|
|
|
+const Drawer = styled(MuiDrawer,
|
|
|
|
|
+ { shouldForwardProp: (prop) => prop !== 'open' })(
|
|
|
({ theme, open }) => ({
|
|
({ theme, open }) => ({
|
|
|
'& .MuiDrawer-paper': {
|
|
'& .MuiDrawer-paper': {
|
|
|
position: 'relative',
|
|
position: 'relative',
|
|
@@ -75,8 +78,11 @@ function DashboardContent() {
|
|
|
const [open, setOpen] = React.useState(false);
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
|
|
|
|
const isMovil = Size('(min-width:770px)');
|
|
const isMovil = Size('(min-width:770px)');
|
|
|
|
|
+ const navbar = React.useRef(null);
|
|
|
|
|
|
|
|
- const toggleDrawer = () => setOpen(!open);
|
|
|
|
|
|
|
+ const toggleDrawer = () => {
|
|
|
|
|
+ setOpen(!open);
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
const [anchorElMovil, setAnchorElMov] = React.useState(false);
|
|
const [anchorElMovil, setAnchorElMov] = React.useState(false);
|
|
|
const MenuResponsive = () => {
|
|
const MenuResponsive = () => {
|
|
@@ -86,24 +92,20 @@ function DashboardContent() {
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
return (
|
|
|
- <ThemeProvider theme={psicotheme}>
|
|
|
|
|
|
|
+ <ThemeProvider theme={mdTheme}>
|
|
|
|
|
|
|
|
- <MenuMovil
|
|
|
|
|
- anchor={anchorElMovil}
|
|
|
|
|
- control={setAnchorElMov} />
|
|
|
|
|
|
|
+ <MenuMovil anchor={anchorElMovil} control={setAnchorElMov} />
|
|
|
|
|
|
|
|
<Box sx={{ display: 'flex' }}>
|
|
<Box sx={{ display: 'flex' }}>
|
|
|
- <CssBaseline />
|
|
|
|
|
- <AppBar style={{ backgroundColor: '#fff', boxShadow: 'None' }} position="absolute" open={!isMovil ? open : false}>
|
|
|
|
|
|
|
+ <AppBar style={{ backgroundColor: '#fff', boxShadow: 'None' }} position="absolute" open={open}>
|
|
|
<Toolbar sx={{ pr: '24px', borderBottom: "1px solid #ec5e69" }} >
|
|
<Toolbar sx={{ pr: '24px', borderBottom: "1px solid #ec5e69" }} >
|
|
|
|
|
|
|
|
- {/* boton para activar navegacion */}
|
|
|
|
|
<IconButton
|
|
<IconButton
|
|
|
edge="start"
|
|
edge="start"
|
|
|
color="inherit"
|
|
color="inherit"
|
|
|
aria-label="open drawer"
|
|
aria-label="open drawer"
|
|
|
- onClick={!isMovil ? MenuResponsive : toggleDrawer}
|
|
|
|
|
- sx={{ marginRight: '36px', ...(!isMovil && open && { display: 'none' }), }} >
|
|
|
|
|
|
|
+ onClick={toggleDrawer}
|
|
|
|
|
+ sx={{ marginRight: '36px', ...( open && { display: 'none' }), }} >
|
|
|
<MenuIcon style={{
|
|
<MenuIcon style={{
|
|
|
background: '#ec5e69',
|
|
background: '#ec5e69',
|
|
|
fontSize: "40",
|
|
fontSize: "40",
|
|
@@ -113,7 +115,7 @@ function DashboardContent() {
|
|
|
|
|
|
|
|
<Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
|
|
<Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
|
|
|
{
|
|
{
|
|
|
- !isMovil && open ? (
|
|
|
|
|
|
|
+ open ? (
|
|
|
<React.Fragment>
|
|
<React.Fragment>
|
|
|
|
|
|
|
|
<IconButton onClick={toggleDrawer}>
|
|
<IconButton onClick={toggleDrawer}>
|
|
@@ -130,7 +132,7 @@ function DashboardContent() {
|
|
|
<UserOptions/>
|
|
<UserOptions/>
|
|
|
</Toolbar>
|
|
</Toolbar>
|
|
|
</AppBar>
|
|
</AppBar>
|
|
|
- <Drawer variant="permanent" open={open}>
|
|
|
|
|
|
|
+ <Drawer variant="permanent" open={open} >
|
|
|
<Toolbar
|
|
<Toolbar
|
|
|
sx={{
|
|
sx={{
|
|
|
display: 'flex',
|
|
display: 'flex',
|