portfolio/website/components/Sidebar.vue

<template>
  <div class="bg-dark-800 h-screen w-full sticky top-0 flex flex-col justify-center">
    <img src="/logo.svg" alt="Xeovalyte logo" class="mx-auto w-48">
    <div class="flex flex-col gap-y-3 text-center mt-10">
      <a href="#about" class="font-bold text-xl text-primary-500" :class="route.hash === '#about' ? 'opacity-100' : 'opacity-50'">
        About
      </a>
      <a href="#skills" to="#skills" class="font-bold text-xl text-primary-500" :class="route.hash === '#skills' ? 'opacity-100' : 'opacity-50'">
        Skills
      </a>
      <a href="#projects" class="font-bold text-xl text-primary-500" :class="route.hash === '#projects' ? 'opacity-100' : 'opacity-50'">
        Projects
      </a>
    </div>
  </div>
</template>

<script setup>
const route = useRoute()
</script>