import Logo from '../Images/logo.png';
import Fade from '@mui/material/Fade';

import {
    Home, Work,VisibilityOff,PeopleAlt, Equalizer
} from '@mui/icons-material/'


import { NavItem } from '../Components/Navigation/NavItem'


export function MenuMovil(props) {

    let { open } =  props;

    return(
        <Fade 
            in={open}>
            <div className="menu-shit w3-sidebar w3-bar-block w3-border-right" id="mySidebar">
                <div style={{ flat : 'righ' }} className="sidebar-header">
                    <div className="width_img_mov">
                        <img src={Logo} alt="pruebas psicometricas"/>
                    </div>
                </div>

                <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" />

            </div>
        </Fade>
    )

}