landing/components/NavBar.vue

<template>
  <nav class="relative">
    <div class="mx-auto flex justify-between items-center h-20">
      <!-- Logo -->
      <NuxtLink to="/">
        <img
          width="121.22628021240234"
          height="48"
          alt="logo-kit-economia-social"
          src="/assets/img/LOGO-KIT_horizontal_positivo_color.jpg"
        />
      </NuxtLink>

      <!-- Desktop menu -->
      <ul class="hidden lg:flex items-center gap-6 font-semibold text-sm">
        <li><NuxtLink to="/" class="hover:bg-button-hover hover:text-white p-2 rounded-lg">INICIO</NuxtLink></li>
        <li><NuxtLink to="/nosotras" class="hover:bg-button-hover hover:text-white p-2 rounded-lg">NOSOTRAS</NuxtLink></li>

        <!-- Dropdown -->
        <li class="relative" ref="dropdownRef">
          <button 
            class="hover:bg-button-hover hover:text-white p-2 rounded-lg cursor-pointer"
            @click="handleDropdown">
            HERRAMIENTAS
          </button>
          <transition
            enter-active-class="transition duration-300 ease-out"
            enter-from-class="opacity-0 scale-95"
            enter-to-class="opacity-100 scale-100"
            leave-active-class="transition duration-200 ease-in"
            leave-from-class="opacity-100 scale-100"
            leave-to-class="opacity-0 scale-95"
          >
            <ul
              v-show="dropdownOpen"
              class="absolute right-0 mt-2 w-56 bg-white rounded-3xl shadow-lg p-4 space-y-2 z-50 text-sm text-center"
            >
              <li><NuxtLink to="/consumo" class="block hover:bg-button hover:text-white px-2 py-1 rounded-t-2xl">CONSUMO CUIDADO</NuxtLink></li>
              <li><NuxtLink to="/aula-virtual" class="block hover:bg-button hover:text-white px-2 py-1">AULA VIRTUAL</NuxtLink></li>
              <li><NuxtLink to="/iguales" class="block hover:bg-button hover:text-white px-2 py-1">IGUALES</NuxtLink></li>
              <li><NuxtLink to="/ods" class="block hover:bg-button hover:text-white px-2 py-1">ODS</NuxtLink></li>
              <li><NuxtLink to="/certifica" class="block hover:bg-button hover:text-white px-2 py-1">CERTIFICA-T</NuxtLink></li>
              <li><NuxtLink to="/foro" class="block hover:bg-button hover:text-white px-2 py-1 rounded-b-2xl">FORO</NuxtLink></li>
            </ul>
          </transition>
        </li>

        <!-- CTA -->
        <li>
          <NuxtLink to="/aula" >
            <ButtonCTA color="aula-base" size="lg">
              AULA VIRTUAL
            </ButtonCTA>
          </NuxtLink>
        </li>
      </ul>

      <!-- Mobile menu toggle -->
      <button 
        class="lg:hidden focus:outline-none"
        @click="handleMenu">
          <svg v-if="!menuIsOpen" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h18"/><path d="M3 18h18"/><path d="M3 6h18"/></svg>
          <svg v-if="menuIsOpen" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg>
      </button>
    </div>

    <!-- Mobile menu -->
    <transition
      enter-active-class="transition duration-300 ease-out"
      enter-from-class="opacity-0 translate-x-2"
      enter-to-class="opacity-100 translate-x-0"
      leave-active-class="transition duration-200 ease-in"
      leave-from-class="opacity-100 translate-x-0"
      leave-to-class="opacity-0 translate-x-2"
    >
    <div v-show="menuIsOpen" class="lg:hidden p-5 bg-gradient-conic rounded-3xl min-h-svh">
        <ul class="space-y-4 text-sm text-end w-fit ml-auto">
          <li class="p-2"><NuxtLink to="/">INICIO</NuxtLink></li>
          <li class="p-2"><NuxtLink to="/nosotras">NOSOTRAS</NuxtLink></li>
          <li class="p-2 border-b">HERRAMIENTAS</li>
          <li class="p-2"><NuxtLink to="/consumo">CONSUMO CUIDADO</NuxtLink></li>
          <li class="p-2"><NuxtLink to="/aula">AULA VIRTUAL</NuxtLink></li>
          <li class="p-2"><NuxtLink to="/iguales">IGUALES</NuxtLink></li>
          <li class="p-2"><NuxtLink to="/ods">ODS</NuxtLink></li>
          <li class="p-2"><NuxtLink to="/certifica">CERTIFICA-T</NuxtLink></li>
          <li class="p-2"><NuxtLink to="/foro">FORO</NuxtLink></li>
        </ul>
      </div>
    </transition>
  </nav>
</template>

<script>

export default {
  data() {
    return {
      dropdownOpen: false,
      // mobileMenuOpen: false,
      menuIsOpen: false,
    };
  },
  mounted() {
    document.addEventListener('click', this.handleClickOutside);
  },
  beforeUnmount() {
    document.removeEventListener('click', this.handleClickOutside);
  },
  methods: {
    handleDropdown() {
      this.dropdownOpen = !this.dropdownOpen;
    },
    handleClickOutside(e) {
      const dropdown = this.$refs.dropdownRef;
      if (dropdown && !dropdown.contains(e.target)) {
        this.dropdownOpen = false;
      }
    },
    handleMenu() {
      this.menuIsOpen = !this.menuIsOpen;
    }
  },
};
</script>