sfp_front_nuxt_iguassu_alliance/app/components/AppHeader.vue

<template>
  <header ref="headerRef" class="w-9/10 lg:w-auto absolute top-7 center-0 z-50 bg-black/80 lg:bg-black/60">
    <nav class="flex items-center justify-center h-[55px] px-4 relative">
      <div class="hidden md:flex items-center justify-center gap-1">
        <NuxtLink
          v-for="item in navItems"
          :key="item.label"
          :to="item.href"
          class="relative text-xs font-open-sans font-semibold px-3 uppercase transition-colors duration-200 pb-1 leading-7"
          :class="[
            activeSection === item.href.slice(1)
              ? 'text-[#E3FA6D] after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-[#E3FA6D]'
              : 'text-white hover:text-white/85'
          ]"
        >
          {{ item.label }}
        </NuxtLink>
      </div>

      <NuxtLink to="#hero" class="md:hidden absolute left-4">
        <NuxtImg src="/img/logo_2.png" class="h-9 w-auto object-contain" />
      </NuxtLink>

      <button
        class="md:hidden absolute right-4 text-white focus:outline-none"
        aria-label="Abrir menu"
        @click.stop="menuOpen = !menuOpen"
      >
        <svg v-if="!menuOpen" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
        <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </nav>

    <div
      v-if="menuOpen"
      class="md:hidden flex flex-col items-center py-4 gap-4"
    >
      <NuxtLink
        v-for="item in navItems"
        :key="item.label"
        :to="item.href"
        class="relative text-xs font-open-sans font-semibold uppercase transition-colors duration-200"
        :class="[
          activeSection === item.href.slice(1)
            ? 'text-[#E3FA6D]'
            : 'text-white hover:text-white/85'
        ]"
        @click="menuOpen = false"
      >
        {{ item.label }}
      </NuxtLink>
    </div>
  </header>
</template>

<script setup lang="ts">
const menuOpen = ref(false)
const headerRef = ref<HTMLElement | null>(null)
const activeSection = ref('hero')

const navItems = [
  { label: 'Home', href: '#hero' },
  { label: 'A Imersão', href: '#imersao' },
  { label: 'Metodologia', href: '#metodologia' },
  { label: 'Executores', href: '#executores' },
  { label: 'Próximos Destinos', href: '#destinos' },
  { label: 'Contato', href: '#contato' },
]

function handleClickOutside(event: MouseEvent) {
  if (menuOpen.value && headerRef.value && !headerRef.value.contains(event.target as Node)) {
    menuOpen.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)

  const sectionIds = navItems.map(i => i.href.slice(1))
  const observer = new IntersectionObserver(
    (entries) => {
      for (const entry of entries) {
        if (entry.isIntersecting) {
          activeSection.value = entry.target.id
        }
      }
    },
    { threshold: 0.3 }
  )

  sectionIds.forEach(id => {
    const el = document.getElementById(id)
    if (el) observer.observe(el)
  })

  onUnmounted(() => {
    document.removeEventListener('click', handleClickOutside)
    observer.disconnect()
  })
})
</script>