46 lines
1.6 KiB
Vue
46 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<div class="w-full px-5 h-12 bg-dark-800/40 backdrop-blur-sm sticky z-40 top-0 left-0">
|
||
|
|
<div class="w-full h-full flex">
|
||
|
|
<img src="/logo.svg" alt="Xeovalyte logo" class="w-10 my-auto">
|
||
|
|
<Icon name="ph:list-bold" size="2.5em" class="ml-auto my-auto text-primary-500 hover:cursor-pointer" @click="menuOpen = true" />
|
||
|
|
</div>
|
||
|
|
<Transition>
|
||
|
|
<div v-if="menuOpen" class="fixed z-50 top-0 left-0 w-screen h-screen bg-dark-800/60 backdrop-blur-lg px-5 flex flex-col">
|
||
|
|
<div class="w-full h-12 flex">
|
||
|
|
<img src="/logo.svg" alt="Xeovalyte logo" class="w-10 my-auto">
|
||
|
|
<Icon name="ph:x-bold" size="2.5em" class="ml-auto my-auto text-primary-500 hover:cursor-pointer" @click="menuOpen = false" />
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col mx-auto mt-48 gap-y-8">
|
||
|
|
<a href="#about" class="font-bold text-4xl text-primary-500" :class="route.hash === '#about' ? 'opacity-100' : 'opacity-50'">
|
||
|
|
About
|
||
|
|
</a>
|
||
|
|
<a href="#skills" to="#skills" class="font-bold text-4xl text-primary-500" :class="route.hash === '#skills' ? 'opacity-100' : 'opacity-50'">
|
||
|
|
Skills
|
||
|
|
</a>
|
||
|
|
<a href="#projects" class="font-bold text-4xl text-primary-500" :class="route.hash === '#projects' ? 'opacity-100' : 'opacity-50'">
|
||
|
|
Projects
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Transition>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
const menuOpen = ref(false);
|
||
|
|
|
||
|
|
const route = useRoute()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.v-enter-active,
|
||
|
|
.v-leave-active {
|
||
|
|
transition: transform 0.3s ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.v-enter-from,
|
||
|
|
.v-leave-to {
|
||
|
|
transform: translateY(-100%);
|
||
|
|
}
|
||
|
|
</style>
|