<template>
  <div class="fixed hidden lg:block left-3 top-1/2 text-primary-500 space-y-1 z-50">
    <div @click="scrollToElement('heading')" class="py-2 hover:cursor-pointer">
      <div class="h-1 rounded-full bg-primary-500 transition-all duration-300 hover:cursor-pointer" :class="route.hash === '#heading' ? 'w-16' : 'w-8'" />
    </div>
    <div @click="scrollToElement('about')" class="py-2 hover:cursor-pointer">
      <div class="h-1 rounded-full bg-primary-500 transition-all duration-300 hover:cursor-pointer" :class="route.hash === '#about' ? 'w-16' : 'w-8'" />
    </div>
    <div @click="scrollToElement('skills')" class="py-2 hover:cursor-pointer">
      <div class="h-1 rounded-full bg-primary-500 transition-all duration-300 hover:cursor-pointer" :class="route.hash === '#skills' ? 'w-16' : 'w-8'" />
    </div>
  </div>
</template>

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