102 lines
3.0 KiB
Vue
102 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { navbarData } from '../../data'
|
|
|
|
const colorMode = useColorMode()
|
|
function onClick(val: string) {
|
|
colorMode.preference = val
|
|
}
|
|
|
|
const route = useRoute()
|
|
function isActive(path: string) {
|
|
return route.path.startsWith(path)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="py-5 border-b dark:border-gray-800 font-semibold">
|
|
<div class="flex px-6 container max-w-5xl justify-between mx-auto items-baseline">
|
|
<ul class="flex items-baseline space-x-5">
|
|
<li class="text-base sm:text-2xl font-bold">
|
|
<NuxtLink to="/" :class="{ underline: $route.path === '/' }">
|
|
{{ navbarData.homeTitle }}
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
<ul class="flex items-center space-x-3 sm:space-x-6 text-sm sm:text-lg">
|
|
<li>
|
|
<NuxtLink to="/blogs" :class="{ underline: isActive('/blogs') }"> Blogs </NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink to="/categories" :class="{ underline: isActive('/categories') }">
|
|
Categories
|
|
</NuxtLink>
|
|
</li>
|
|
<li title="About Me">
|
|
<NuxtLink
|
|
to="/about"
|
|
aria-label="About me"
|
|
:class="{ underline: $route.path === '/about' }"
|
|
>
|
|
About
|
|
</NuxtLink>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<ClientOnly>
|
|
<div class="relative w-5 h-5 flex items-center justify-center">
|
|
<Transition name="icon-fade" mode="out-in">
|
|
<button
|
|
v-if="colorMode.value === 'light'"
|
|
key="light-mode"
|
|
name="light-mode"
|
|
title="Light"
|
|
class="absolute inset-0 flex items-center justify-center hover:scale-110 transition-all ease-out hover:cursor-pointer"
|
|
@click="onClick('dark')"
|
|
>
|
|
<Icon name="icon-park:moon" size="20" />
|
|
</button>
|
|
<button
|
|
v-else
|
|
key="dark-mode"
|
|
name="dark-mode"
|
|
title="Dark"
|
|
class="absolute inset-0 flex items-center justify-center hover:scale-110 transition-all ease-out hover:cursor-pointer"
|
|
@click="onClick('light')"
|
|
>
|
|
<Icon name="noto:sun" size="20" />
|
|
</button>
|
|
</Transition>
|
|
</div>
|
|
<template #fallback>
|
|
<!-- this will be rendered on server side -->
|
|
<Icon name="svg-spinners:180-ring" size="20" class="-translate-y-[-20%]" />
|
|
</template>
|
|
</ClientOnly>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.icon-fade-enter-active,
|
|
.icon-fade-leave-active {
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
.icon-fade-enter-from {
|
|
opacity: 0;
|
|
transform: rotate(-90deg) scale(0.8);
|
|
}
|
|
|
|
.icon-fade-leave-to {
|
|
opacity: 0;
|
|
transform: rotate(90deg) scale(0.8);
|
|
}
|
|
|
|
.icon-fade-enter-to,
|
|
.icon-fade-leave-from {
|
|
opacity: 1;
|
|
transform: rotate(0deg) scale(1);
|
|
}
|
|
</style>
|