<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<link rel="stylesheet" href="/web/css/styleInicio.css">
<menu>
  <div class="menu-container">
    <div class="cart-container">
      <a href="/verCarrito">
        <div class="cart-icon">
          <i class="bi bi-cart"></i>
          <span class="cart-counter">
            <%= carrito.length %>
          </span>
        </div>
      </a>
    </div>
    <script>
      // Obtiene el contador y el valor actual
      const cartCounter = document.querySelector(".cart-counter");
      const currentCount = parseInt(cartCounter.innerHTML);

    </script>


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