styles fixes

psicoadmin/public/index.html

@@ -13,7 +13,7 @@
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

psicoadmin/src/App.css

@@ -36,3 +36,16 @@
     transform: rotate(360deg);
   }
 }
+
+.Mui-selected{
+    color : #FFF !important;
+    background-color : #fd4b4b !important;
+}
+
+.Mui-selected > .MuiListItemIcon-root{
+    color : #FFF !important;
+}
+
+.MuiBadge-badge{
+    background-color : #fd4b4b !important;
+}

psicoadmin/src/Auth/AuthProvider.js

@@ -12,7 +12,7 @@ export function AuthProvider ({ children }){
             localStorage.setItem('user', user)
             setUser(user)
         },
-        logout : () =>{
+        logout : () => {
             setUser(null)
             localStorage.setItem('user', JSON.stringify({ }) )
         },
@@ -20,7 +20,6 @@ export function AuthProvider ({ children }){
             if(!user) return false
             let current = JSON.parse(user)
             let keys = Object.keys(current)
-            console.log("CURRENT -> ",current, 'KEY LEN -> ', keys.length)
             return  keys.length > 0
         }
     }

psicoadmin/src/Components/Dashboard.js

@@ -16,7 +16,7 @@ import Avatar from '@mui/material/Avatar';
 import MenuIcon from '@mui/icons-material/Menu';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import NotificationsIcon from '@mui/icons-material/Notifications';
-import { mainListItems, secondaryListItems } from './listItems';
+import { MainListItems, secondaryListItems } from './listItems';
 
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
@@ -110,11 +110,7 @@ function DashboardContent() {
                         </IconButton>
 
                         <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
-                            <div className="sidebar-header">
-                                <div className="width_img">
-                                    <img src={Logo} alt=""/>
-                                </div>
-                            </div>
+                           revelation come
                         </Typography>
 
 
@@ -175,13 +171,28 @@ function DashboardContent() {
                             alignItems: 'center',
                             justifyContent: 'flex-end',
                             px: [1],
+                            
                         }} >
+
+                            <div className="sidebar-header">
+                                <div className="width_img">
+                                    <img src={Logo} alt=""/>
+                                </div>
+                            </div>
+
+
                         <IconButton onClick={toggleDrawer}>
                             <ChevronLeftIcon />
                         </IconButton>
+
+
+
+
                     </Toolbar>
                     <Divider />
-                    <List>{mainListItems}</List>
+                    <List>
+                        <MainListItems/>
+                    </List>
                     <Divider />
                     <List>{secondaryListItems}</List>
                 </Drawer>

psicoadmin/src/Components/NavStyle.js

@@ -0,0 +1,39 @@
+import Color from 'color';
+
+export default () => ({
+    root: ({ collapsed }) => ({
+        borderTopRightRadius: 20,
+        borderBottomRightRadius: 20,
+        minHeight: 32,
+        '-webkit-font-smoothing': 'antialiased',
+        padding: collapsed ? '0px 6px' : '0 12px 0 26px',
+        width: collapsed ? 32 : 'auto',
+        borderRadius: collapsed ? 20 : 0,
+        overflow: collapsed ? 'hidden' : 'visible',
+        marginLeft: collapsed ? 20 : '',
+        fontSize: 14,
+        '& > svg:first-child': {
+            marginRight: 18,
+            fontSize: 20,
+            opacity: 0.54,
+        },
+        '& .MuiLabel-amount': {
+            fontSize: '0.75rem',
+            letterSpacing: 0.3,
+            marginLeft: 'auto',
+            paddingLeft: 16,
+        },
+    }),
+    selected: ({ color = '#202124' }) => ({
+        fontWeight: 'bold',
+        color,
+        backgroundColor: `${Color(color)
+      .saturate(0.5)
+      .lighten(0.9)
+      .toString()} !important`,
+        '& > svg:first-child': {
+            opacity: 1,
+        }
+    }),
+});
+

psicoadmin/src/Components/listItems.js

@@ -1,11 +1,13 @@
 import * as React from 'react';
+import ListItemButton from '@mui/material/ListItemButton';
 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 { NavLink } from 'react-router-dom'
 
 import HomeIcon from '@mui/icons-material/Home'
 import WorkIcon from '@mui/icons-material/Work';
@@ -21,42 +23,78 @@ import OndemandVideoIcon from '@mui/icons-material/OndemandVideo';
 import StarIcon from '@mui/icons-material/Star';
 import SupportAgentIcon from '@mui/icons-material/SupportAgent';
 
+import NavStyle from './NavStyle' 
+
+
 function Item (props) {
+
+
+    function change (event){
+        props.change(event, props.index)
+    } 
+    let isOn = props.selected === props.index
+
+    //.css-10oikv1-MuiButtonBase-root-MuiListItem-root.Mui-selected
     return(
-        <ListItem button>
+        <ListItem
+            sx={{
+                color : '#25344f',
+                '& .MuiButtonBase-selected' :{
+                    color : '#121212',
+                    backgroundColor : '#101010'
+                }
+            }}
+            selected={isOn}
+            onClick={change} 
+            button
+            >
             <ListItemIcon>
                 {props.icon}
             </ListItemIcon>
-            <Nav.Item>
-                <NavLink to={props.route}>
-                    <ListItemText primary={props.title} />
-                </NavLink>
-            </Nav.Item>
+            <ListItemText 
+                sx={{
+                    fontSize: 12,
+                    ' .css-10hburv-MuiTypography-root' : {
+                        fontSize : '.875rem'
+                    },
+                }}
+                primary={props.title} 
+            />
         </ListItem>
     )
 }
 
 
-export const mainListItems = (
-    <Nav>
-        <ListSubheader inset>MENÚ</ListSubheader>
-        <Item icon={<HomeIcon/>} title="Inicio" route="/home" />
-        <Item icon={<WorkIcon/>} title="Puestos" route="/work" />
-        <Item icon={<VisibilityOffIcon/>} title="Contraseñas" route="/work" />
-        <Item icon={<PeopleAltIcon/>} title="Expedientes" route="/work" />
-        <Item icon={<EqualizerIcon/>} title="Resultados" route="/work" />
-        <Item icon={<FingerprintIcon/>} title="Pruebas" route="/work" />
-        <Item icon={<MiscellaneousServicesIcon/>} title="Configuraciones" route="/work" />
-        <Item icon={<HistoryIcon/>} title="Historial" route="/work" />
+export const MainListItems = () =>  {
+    
+    const [selectedIndex, setSelectedIndex] = React.useState(1);
 
-    </Nav>
-);
+
+    const handleListItemClick = (event, index) => {
+        setSelectedIndex(index);
+    };
+
+
+    return(
+        <List>
+            <ListSubheader inset>MENÚ</ListSubheader>
+            <Item icon={<HomeIcon/>} index={0} selected={selectedIndex} change={handleListItemClick} title="Inicio" route="/dashboard" />
+            <Item icon={<WorkIcon/>} index={1} selected={selectedIndex} change={handleListItemClick} title="Puestos" route="/puestos" />
+            <Item icon={<VisibilityOffIcon/>} selected={selectedIndex}  change={handleListItemClick} index={2} title="Contraseñas" route="/contrasenas" />
+            <Item icon={<PeopleAltIcon/>} selected={selectedIndex}  change={handleListItemClick} index={3} title="Expedientes" route="/expedientes" />
+            <Item icon={<EqualizerIcon/>} selected={selectedIndex}  change={handleListItemClick} index={4} title="Resultados" route="/resultados" />
+            <Item icon={<FingerprintIcon/>} selected={selectedIndex}  change={handleListItemClick} index={5} title="Pruebas" route="/pruebas" />
+            <Item icon={<MiscellaneousServicesIcon/>} selected={selectedIndex}  change={handleListItemClick} index={6} title="Configuraciones" route="/configuraciones" />
+            <Item icon={<HistoryIcon/>} selected={selectedIndex}  change={handleListItemClick} index={7} title="Historial" route="/historial" />
+        </List>
+    )
+};
 
 export const secondaryListItems = (
     <Nav>
         <ListSubheader inset>EXTRAS</ListSubheader>
-        <Item icon={<StarIcon/>} title="Elementos" route="/work" />
-        <Item icon={<OndemandVideoIcon/>} title="Tutoriales" route="/work" />
-        <Item icon={<SupportAgentIcon/>} title="Asistencia Técnica" route="/work" />
+        <Item selected={false} icon={<StarIcon/>} title="Elementos" route="/work" />
+        <Item selected={false} icon={<OndemandVideoIcon/>} title="Tutoriales" route="/work" />
+        <Item selected={false} icon={<SupportAgentIcon/>} title="Asistencia Técnica" route="/work" />
     </Nav>
 );

psicoadmin/src/Css/all.css

@@ -1,7 +1,7 @@
 *{
     text-decoration: none !important;
     outline: 0 !important;
-
+    font-family: 'gudea' !important;
 }
 .row {
     margin: 0 !important;
@@ -16,17 +16,13 @@ body {
     max-width: 100%;
     position: relative;
     margin: 0 auto;
-    font-family: 'gudea';
+    font-family: 'gudea' !important;
     background: #f1f1f1;
-
 }
 .container-in {
     max-width: 1100px;
     margin: 0 auto;
 }
-/*
-DEMO STYLE
- */
 
 a,
 a:hover,

psicoadmin/src/Pages/Configuracion.js

@@ -0,0 +1,5 @@
+export default function Configuracion() {
+    return (
+        <h1>Configuraciones</h1>
+    )
+}

psicoadmin/src/Pages/Contras.js

@@ -0,0 +1,5 @@
+export default function Contrasenas() {
+    return (
+        <h1>Passwords</h1>
+    )
+}

psicoadmin/src/Pages/Expedientes.js

@@ -0,0 +1,5 @@
+export default function Expedientes() {
+    return (
+        <h1>Expedientes</h1>
+    )
+}

psicoadmin/src/Pages/Historial.js

@@ -0,0 +1,5 @@
+export default function Historial() {
+    return (
+        <h1>Historial</h1>
+    )
+}

psicoadmin/src/Pages/Home.js

@@ -0,0 +1,5 @@
+export default function Home() {
+    return (
+        <h1>Bienvenido</h1>
+    )
+}

psicoadmin/src/Pages/Pruebas.js

@@ -0,0 +1,5 @@
+export default function Pruebas() {
+    return (
+        <h1>Pruebas</h1>
+    )
+}

psicoadmin/src/Pages/Puestos.js

@@ -0,0 +1,5 @@
+export default function Puestos() {
+    return (
+        <h1>Puestos</h1>
+    )
+}

psicoadmin/src/Pages/Resultados.js

@@ -0,0 +1,5 @@
+export default function Resultados() {
+    return (
+        <h1>Resultados</h1>
+    )
+}