// import {useEffect} from 'react';
// import { Menu, MenuItem } from '@mui/material';
// import {  useNavigate} from "react-router-dom";

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

export function MenuMovil(props) {

    // const navigate = useNavigate()

    let {  open } =  props;
    console.log(props)

    // useEffect(() => {
    //     console.log('render')
    //     if(!open){
    //         onClose();
    //     }else{
    //         document.getElementById("mySidebar").style.display = "block";
    //     }
    // },[open])


    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" style={{  backgroundColor:  "whitesmoke"}}>
                        <img src={Logo} alt="pruebas psicometricas"/>
                    </div>
                </div>
                <a href="/" className="w3-bar-item w3-button">Link 1</a>
                <a href="/" className="w3-bar-item w3-button">Link 2</a>
                <a href="/" className="w3-bar-item w3-button">Link 3</a>
            </div>
        </Fade>
    )

}