sfp_front_nuxt_serprati_landing/app/components/AppHeader.vue

<template>
  <header class="fixed top-0 left-0 right-0 z-50 bg-white shadow-sm h-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full flex items-center justify-between">

      <!-- Logo sempre à esquerda -->
      <button class="shrink-0 focus:outline-none" @click="scrollTo('quem-somos')" >
        <img
          class="hidden lg:block h-9"
          src="~/assets/images/logo_desktop.svg"
          alt="Serprati"
        >
        <img
          class="block lg:hidden h-8"
          src="~/assets/images/logo_mobile.svg"
          alt="Serprati"
        >
      </button>

      <!-- Todos os itens à direita -->
      <div class="flex items-center gap-6 lg:gap-8">
        <nav class="hidden lg:flex items-center gap-8">
          <template v-for="item in navItems" :key="item.id">
            <span v-if="item.disabled" class="nav-link opacity-50 cursor-default select-none">{{ item.label }}</span>
            <button v-else class="nav-link" @click="scrollTo(item.id)">{{ item.label }}</button>
          </template>
        </nav>

        <button
          class="border border-violet-normal text-violet-normal text-xs lg:text-sm font-semibold px-3 py-1.5 lg:px-5 lg:py-2 rounded-md hover:bg-violet-light transition-colors duration-200 cursor-pointer"
          @click="handleEntrar"
        >
          ENTRAR
        </button>

        <button
          class="flex lg:hidden items-center text-violet-normal cursor-pointer"
          :aria-expanded="isMenuOpen"
          aria-label="Abrir menu"
          @click="isMenuOpen = !isMenuOpen"
        >
          <span class="material-icons text-2xl">{{ isMenuOpen ? 'close' : 'menu' }}</span>
        </button>
      </div>

    </div>

    <Transition name="mobile-menu">
      <nav v-if="isMenuOpen" class="lg:hidden bg-white shadow-md border-t border-neutral-normal">
        <template v-for="item in navItems" :key="item.id">
          <span v-if="item.disabled" class="nav-link-mobile opacity-50 cursor-default select-none">{{ item.label }}</span>
          <button v-else class="nav-link-mobile" @click="onMobileNavClick(item.id)">{{ item.label }}</button>
        </template>
      </nav>
    </Transition>
  </header>
</template>

<script setup lang="ts">
const { events } = useEvents()

const navItems = computed(() => [
  { id: 'quem-somos', label: 'Início' },
  { id: 'beneficios', label: 'Benefícios' },
  { id: 'sobre-nos', label: 'Quem somos' },
  ...(events.value.length ? [{ id: 'eventos', label: 'Eventos' }] : []),
  { id: 'parceiros', label: 'Parceiros', disabled: true },
  { id: 'associe-se', label: 'Associe-se' },
])

const isMenuOpen = ref(false)

const scrollTo = (id: string) => {
  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
}

const onMobileNavClick = (id: string) => {
  isMenuOpen.value = false
  scrollTo(id)
}

const handleEntrar = () => {
  window.open('https://app.serprati.com.br/', '_blank')
}
</script>

<style scoped>
.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: #505050;
  transition: color 0.2s;
  cursor: pointer;
}
.nav-link:hover {
  color: #661d75;
}
.nav-link-mobile {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #505050;
  padding: 0.875rem 1.5rem;
  border-bottom: 1px solid #f2f2f2;
  transition: color 0.2s, background-color 0.2s;
  cursor: pointer;
}
.nav-link-mobile:last-child {
  border-bottom: none;
}
.nav-link-mobile:hover {
  color: #661d75;
  background-color: #f0e8f1;
}

.mobile-menu-enter-active,
.mobile-menu-leave-active {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mobile-menu-enter-from,
.mobile-menu-leave-to {
  opacity: 0;
  transform: translateY(-8px);
}
</style>