portfolio/website/components/Sidebar.vue
2023-11-28 16:15:51 +01:00

21 lines
799 B
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>