<template>
  <div class="w-full px-5 h-12 bg-dark-800/40 backdrop-blur-sm sticky z-40 top-0 left-0">
    <div class="w-full h-full flex">
      <img src="/logo.svg" alt="Xeovalyte logo" class="w-10 my-auto">
      <Icon name="ph:list-bold" size="2.5em" class="ml-auto my-auto text-primary-500 hover:cursor-pointer" @click="menuOpen = true" />
    </div>
    <Transition>
      <div v-if="menuOpen" class="fixed z-50 top-0 left-0 w-screen h-screen bg-dark-800/60 backdrop-blur-lg px-5 flex flex-col">
        <div class="w-full h-12 flex">
          <img src="/logo.svg" alt="Xeovalyte logo" class="w-10 my-auto">
          <Icon name="ph:x-bold" size="2.5em" class="ml-auto my-auto text-primary-500 hover:cursor-pointer" @click="menuOpen = false" />
        </div>
        <div class="flex flex-col mx-auto mt-48 gap-y-8">
          <a href="#about" class="font-bold text-4xl text-primary-500" :class="route.hash === '#about' ? 'opacity-100' : 'opacity-50'">
            About
          </a>
          <a href="#skills" to="#skills" class="font-bold text-4xl text-primary-500" :class="route.hash === '#skills' ? 'opacity-100' : 'opacity-50'">
            Skills
          </a>
          <a href="#projects" class="font-bold text-4xl text-primary-500" :class="route.hash === '#projects' ? 'opacity-100' : 'opacity-50'">
            Projects
          </a>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup>
const menuOpen = ref(false);

const route = useRoute()
</script>

<style>
.v-enter-active,
.v-leave-active {
  transition: transform 0.3s ease-out;
}

.v-enter-from,
.v-leave-to {
  transform: translateY(-100%);
}
</style>
