Browse Source

etapa 1 front ent :art:

amenpunk 3 years ago
parent
commit
19decbe3d4
2 changed files with 38 additions and 10 deletions
  1. 15 1
      psicoadmin/src/App.css
  2. 23 9
      psicoadmin/src/Components/Dashboard.js

+ 15 - 1
psicoadmin/src/App.css

45
 .Mui-selected > .MuiListItemIcon-root{
45
 .Mui-selected > .MuiListItemIcon-root{
46
     color : #FFF !important;
46
     color : #FFF !important;
47
 }
47
 }
48
-
49
 .MuiBadge-badge{
48
 .MuiBadge-badge{
50
     background-color : #fd4b4b !important;
49
     background-color : #fd4b4b !important;
51
 }
50
 }
51
+
52
+.MuiToolbar-root{
53
+    border-bottom: 1px solid #fd4b4b !important;
54
+}
55
+
56
+.MuiListSubheader-root{
57
+    padding-left : 15px !important;
58
+    color : #cbcbcb !important;
59
+    font-weight : bold !important;
60
+    padding-bottom : 0px !important;
61
+    margin-bottom : 0px !important;
62
+    line-height: 30px !important;
63
+    font-size : 12px !important;
64
+}
65
+

+ 23 - 9
psicoadmin/src/Components/Dashboard.js

14
 import Avatar from '@mui/material/Avatar';
14
 import Avatar from '@mui/material/Avatar';
15
 
15
 
16
 import MenuIcon from '@mui/icons-material/Menu';
16
 import MenuIcon from '@mui/icons-material/Menu';
17
+import FullscreenIcon from '@mui/icons-material/Fullscreen';
18
+
17
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
19
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
18
 import NotificationsIcon from '@mui/icons-material/Notifications';
20
 import NotificationsIcon from '@mui/icons-material/Notifications';
19
 import { MainListItems, secondaryListItems } from './listItems';
21
 import { MainListItems, secondaryListItems } from './listItems';
103
             <Box sx={{ display: 'flex' }}>
105
             <Box sx={{ display: 'flex' }}>
104
                 <CssBaseline />
106
                 <CssBaseline />
105
                 <AppBar style={{ backgroundColor : '#fff' }} position="absolute" open={open}>
107
                 <AppBar style={{ backgroundColor : '#fff' }} position="absolute" open={open}>
106
-                    <Toolbar sx={{ pr: '24px' }} >
108
+                    <Toolbar sx={{ pr: '24px' ,  borderBottom : "1px solid #ec5e69"}} >
107
 
109
 
108
                         <IconButton style={{ color : '#212529' }} edge="start" color="inherit" aria-label="open drawer" onClick={toggleDrawer} sx={{ marginRight: '36px', ...(open && { display: 'none' }), }} >
110
                         <IconButton style={{ color : '#212529' }} edge="start" color="inherit" aria-label="open drawer" onClick={toggleDrawer} sx={{ marginRight: '36px', ...(open && { display: 'none' }), }} >
109
                             <MenuIcon />
111
                             <MenuIcon />
110
                         </IconButton>
112
                         </IconButton>
111
 
113
 
112
                         <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
114
                         <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
113
-                           revelation come
115
+
116
+                        <IconButton onClick={toggleDrawer}>
117
+                            {
118
+                                open ? 
119
+                                    (
120
+                                    <React.Fragment>
121
+                                        <MenuIcon />
122
+                                        <FullscreenIcon style={{ marginLeft : 15 }}/>
123
+                                    </React.Fragment>
124
+                                    )
125
+                                : undefined
126
+
127
+                            }
128
+                        </IconButton>
129
+
130
+
131
+
132
+
114
                         </Typography>
133
                         </Typography>
115
 
134
 
116
 
135
 
169
                         sx={{
188
                         sx={{
170
                             display: 'flex',
189
                             display: 'flex',
171
                             alignItems: 'center',
190
                             alignItems: 'center',
172
-                            justifyContent: 'flex-end',
191
+                            justifyContent: 'flex-start',
173
                             px: [1],
192
                             px: [1],
174
                             
193
                             
175
                         }} >
194
                         }} >
176
 
195
 
177
-                            <div className="sidebar-header">
196
+                        <div style={{ flat : 'righ' }} className="sidebar-header">
178
                                 <div className="width_img">
197
                                 <div className="width_img">
179
                                     <img src={Logo} alt=""/>
198
                                     <img src={Logo} alt=""/>
180
                                 </div>
199
                                 </div>
181
                             </div>
200
                             </div>
182
 
201
 
183
 
202
 
184
-                        <IconButton onClick={toggleDrawer}>
185
-                            <ChevronLeftIcon />
186
-                        </IconButton>
187
-
188
-
189
 
203
 
190
 
204
 
191
                     </Toolbar>
205
                     </Toolbar>