import ProfilePicture from '../Images/man.png';

export function Header () {

    return (

        <nav className="navbar navbar-expand-lg navbar-light">
            <div className="container-fluid">

                <button type="button" id="sidebarCollapse" className="btncollapse">
                    <i className="fas fa-bars"></i>
                </button>
                <button type="button" id="dashboardfull" className="btncollapse" onClick={ () => console.log('open full screen') }>
                    <i className="fa fa-expand" aria-hidden="true"></i>
                </button>
                <button className="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <i className="fas fa-align-justify"></i>
                </button>

                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="nav navbar-nav ml-auto">
                        <li className="nav-item">
                            <a href="/" className="nav-link" id="dropdownNotificaciones" data-toggle="dropdown" aria-expanded="false"><i className="far fa-bell"></i></a>
                            <div className="dropdown-menu dropdown-menu-right dropdown_noti" aria-labelledby="dropdownNotificaciones">
                                <div className="body_drop_notification">
                                    <div className="row">
                                        <div className="col-md-2">
                                            <div className="rounded-pic">
                                                <img src={ProfilePicture} alt=""/>
                                            </div>
                                        </div>
                                        <div className="col-md-6">
                                            <h1>Fernando Vásquez</h1>
                                            <p>He cambiado el nombre de una plaza manualmente.</p>
                                        </div>
                                        <div className="col-md-4 panel_time_notification">
                                            <a href="/" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
                                        </div>
                                    </div>
                                </div>
                                <div className="body_drop_notification">
                                    <div className="row">
                                        <div className="col-md-2">
                                            <div className="rounded-pic">
                                                <img src="images/man.png" alt=""/>
                                            </div>
                                        </div>
                                        <div className="col-md-6">
                                            <h1>Fernando Vásquez</h1>
                                            <p>He cambiado el nombre de una plaza manualmente.</p>
                                        </div>
                                        <div className="col-md-4 panel_time_notification">
                                            <a href="/" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
                                        </div>
                                    </div>
                                </div>
                                <div className="body_drop_notification">
                                    <div className="row">
                                        <div className="col-md-2">
                                            <div className="rounded-pic">
                                                <img src="images/man.png" alt=""/>
                                            </div>
                                        </div>
                                        <div className="col-md-6">
                                            <h1>Fernando Vásquez</h1>
                                            <p>He cambiado el nombre de una plaza manualmente.</p>
                                        </div>
                                        <div className="col-md-4 panel_time_notification">
                                            <a href="/" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
                                        </div>
                                    </div>
                                </div>
                                <div className="body_drop_notification">
                                    <div className="row">
                                        <div className="col-md-2">
                                            <div className="rounded-pic">
                                                <img src="images/man.png" alt=""/>
                                            </div>
                                        </div>
                                        <div className="col-md-6">
                                            <h1>Fernando Vásquez</h1>
                                            <p>He cambiado el nombre de una plaza manualmente.</p>
                                        </div>
                                        <div className="col-md-4 panel_time_notification">
                                            <a href="/" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
                                        </div>
                                    </div>
                                </div>
                                <div className="body_drop_notification">
                                    <div className="row">
                                        <div className="col-md-2">
                                            <div className="rounded-pic">
                                                <img src="images/man.png" alt=""/>
                                            </div>
                                        </div>
                                        <div className="col-md-6">
                                            <h1>Fernando Vásquez</h1>
                                            <p>He cambiado el nombre de una plaza manualmente.</p>
                                        </div>
                                        <div className="col-md-4 panel_time_notification">
                                            <a href="/" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li className="nav-item">
                            <a href="/" className="btn-drop" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
                                <div className="rounded-pic">
                                    <img src="images/man.png" alt=""/>
                                </div>
                            </a>
                            <div className="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                                <a className="dropdown-item" href="perfil.php">Perfil</a>
                                <a className="dropdown-item" href="configuraciones.php">Configuraciones</a>
                                <a className="dropdown-item" href="login.php">Cerrar sesión</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    )
}
