浏览代码

change the image icon

amenpunk 2 年之前
父节点
当前提交
43ba852895
共有 3 个文件被更改,包括 20 次插入18 次删除
  1. 18 16
      src/Components/Dashboard.js
  2. 2 2
      src/Css/all.css
  3. 二进制
      src/Images/evaluacion.jpeg

+ 18 - 16
src/Components/Dashboard.js

@@ -1,5 +1,5 @@
1 1
 import React from 'react';
2
-import { ThemeProvider, styled } from '@mui/material/styles';
2
+import { ThemeProvider, styled, createTheme } from '@mui/material/styles';
3 3
 
4 4
 import {
5 5
     Container, IconButton, Divider,
@@ -11,18 +11,20 @@ import {
11 11
     Menu as MenuIcon,
12 12
 } from '@mui/icons-material'
13 13
 
14
-import Logo from '../Images/logo.png';
14
+// import Logo from '../Images/logo.png';
15
+import Logo from '../Images/evaluacion.jpeg';
15 16
 
16 17
 import { Outlet } from "react-router-dom";
17 18
 import { MenuMovil } from '../Components/Navigation/MenuMovil';
18 19
 import Footer from "../Components/Footer";
19 20
 
20
-import { psicotheme } from '../Utils/theme'
21
+// import { psicotheme } from '../Utils/theme'
21 22
 import { Drawer as MuiDrawer, AppBar as MuiAppBar } from "../Components/Navigation/AppBar"
22 23
 import { MainListItems, SecondaryListItems } from '../Components/Navigation/listItems';
23 24
 import { UserOptions } from '../Components/Navigation/UserOptions'
24 25
 
25 26
 const drawerWidth = 240;
27
+const mdTheme = createTheme();
26 28
 
27 29
 const AppBar = styled(MuiAppBar, {
28 30
     shouldForwardProp: (prop) => prop !== 'open',
@@ -43,7 +45,8 @@ const AppBar = styled(MuiAppBar, {
43 45
 }));
44 46
 
45 47
 
46
-const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
48
+const Drawer = styled(MuiDrawer, 
49
+    { shouldForwardProp: (prop) => prop !== 'open' })(
47 50
     ({ theme, open }) => ({
48 51
         '& .MuiDrawer-paper': {
49 52
             position: 'relative',
@@ -75,8 +78,11 @@ function DashboardContent() {
75 78
     const [open, setOpen] = React.useState(false);
76 79
 
77 80
     const isMovil = Size('(min-width:770px)');
81
+    const navbar = React.useRef(null);
78 82
 
79
-    const toggleDrawer = () => setOpen(!open);
83
+    const toggleDrawer = () => {
84
+        setOpen(!open);
85
+    }
80 86
 
81 87
     const [anchorElMovil, setAnchorElMov] = React.useState(false);
82 88
     const MenuResponsive = () => {
@@ -86,24 +92,20 @@ function DashboardContent() {
86 92
 
87 93
 
88 94
     return (
89
-        <ThemeProvider theme={psicotheme}>
95
+        <ThemeProvider theme={mdTheme}>
90 96
 
91
-            <MenuMovil
92
-                anchor={anchorElMovil}
93
-                control={setAnchorElMov} />
97
+            <MenuMovil anchor={anchorElMovil} control={setAnchorElMov} />
94 98
 
95 99
             <Box sx={{ display: 'flex' }}>
96
-                <CssBaseline />
97
-                <AppBar style={{ backgroundColor: '#fff', boxShadow: 'None' }} position="absolute" open={!isMovil ? open : false}>
100
+                <AppBar style={{ backgroundColor: '#fff', boxShadow: 'None' }} position="absolute" open={open}>
98 101
                     <Toolbar sx={{ pr: '24px', borderBottom: "1px solid #ec5e69" }} >
99 102
 
100
-                        {/* boton para activar navegacion */}
101 103
                         <IconButton
102 104
                             edge="start"
103 105
                             color="inherit"
104 106
                             aria-label="open drawer"
105
-                            onClick={!isMovil ? MenuResponsive : toggleDrawer}
106
-                            sx={{ marginRight: '36px', ...(!isMovil && open && { display: 'none' }), }} >
107
+                            onClick={toggleDrawer}
108
+                            sx={{ marginRight: '36px', ...( open && { display: 'none' }), }} >
107 109
                             <MenuIcon style={{
108 110
                                 background: '#ec5e69',
109 111
                                 fontSize: "40",
@@ -113,7 +115,7 @@ function DashboardContent() {
113 115
 
114 116
                         <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
115 117
                             {
116
-                                !isMovil && open ? (
118
+                                open ? (
117 119
                                     <React.Fragment>
118 120
 
119 121
                                         <IconButton onClick={toggleDrawer}>
@@ -130,7 +132,7 @@ function DashboardContent() {
130 132
                         <UserOptions/>
131 133
                     </Toolbar>
132 134
                 </AppBar>
133
-                <Drawer variant="permanent" open={open}>
135
+                <Drawer variant="permanent" open={open} >
134 136
                     <Toolbar
135 137
                         sx={{
136 138
                             display: 'flex',

+ 2 - 2
src/Css/all.css

@@ -83,10 +83,10 @@ a:focus {
83 83
     border-bottom: 1px solid #ec5e69;
84 84
 }
85 85
 .width_img {
86
-    width: 190px;
86
+    width: 200px;
87 87
     float: left;
88 88
     margin: auto;
89
-    padding: 11px;
89
+    /* padding: 2px; */
90 90
 }
91 91
 .width_img_mov {
92 92
     float: left;

二进制
src/Images/evaluacion.jpeg