portfolio/components/layout/Leftbar.vue

18 lines
900 B
Vue
Raw Normal View History

2023-02-12 10:59:55 +01:00
<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>