<!-- menulogin.ejs -->
<link rel="stylesheet" href="/web/css/style.css">
<link rel="icon" href="/web/Img/olla-caliente-image.png">
<title>LoboEat</title>

<menu>
  <div class="menu-container">
    <img id="logo" src="/web/Img/Grupo 1@2x.png" alt="Logo" height="70px">
    <span class="hamburger-icon"><i class="fas fa-bars"></i></span>

    <div class="dropdown-menu">
      <ul>
        <li><a href="/inicio">Inicio</a></li>
        <li><a href="/provAlmaguer">Proveedor Almaguer</a></li>
        <li><a href="/provVero">Proveedor Vero</a></li>
        <% if (usuario && usuario.expediente_cliente) { %>
          <li><a href="/editusr/<%= usuario.expediente_cliente %>">Editar datos</a></li>
          <% } %>
            <li><a href="/aboutus">F&Q</a></li>
            <li><a href="/login">Cerrar Sesión</a></li>
      </ul>
    </div>
  </div>
</menu>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const hamburgerIcon = document.querySelector('.hamburger-icon');
    const dropdownMenu = document.querySelector('.dropdown-menu');

    // Mostrar el menú al hacer clic en el ícono
    hamburgerIcon.addEventListener('click', function (event) {
      event.stopPropagation(); // Evita que el evento se propague a otros elementos
      dropdownMenu.classList.toggle('show');
    });

    // Ocultar el menú al hacer clic fuera del ícono
    document.addEventListener('click', function (event) {
      if (!event.target.matches('.hamburger-icon') && !event.target.closest('.dropdown-menu')) {
        dropdownMenu.classList.remove('show');
      }
    });
  });
</script>