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

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>