18 lines
900 B
Vue
18 lines
900 B
Vue
|
<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>
|