83 lines
2.2 KiB
Vue
83 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
const route = useRoute();
|
|
const theme = ref("light");
|
|
|
|
const activeNavbar = computed(() => {
|
|
const path = route.fullPath;
|
|
const splitedPath = path.split("/");
|
|
const navbarName = splitedPath[1];
|
|
return navbarName;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<header class="sticky top-0 p-3 bg-[#a2d9ff] font-poppins">
|
|
<div class="container px-4 mx-auto max-w-6xl flex justify-between">
|
|
<ul class="flex space-x-8 items-end justify-start">
|
|
<li class="align">
|
|
<nuxt-link to="/">
|
|
<icon
|
|
class="text-cyan-500 hover:scale-110 hover:transition"
|
|
size="35"
|
|
name="mdi:robot-excited"
|
|
/>
|
|
</nuxt-link>
|
|
</li>
|
|
<li>
|
|
<nuxt-link :class="{ underline: activeNavbar === '' }" to="/"
|
|
>Home</nuxt-link
|
|
>
|
|
</li>
|
|
<li>
|
|
<nuxt-link
|
|
:class="{ underline: activeNavbar === 'latest' }"
|
|
to="/latest"
|
|
>Latest</nuxt-link
|
|
>
|
|
</li>
|
|
<li>
|
|
<nuxt-link
|
|
:class="{ underline: activeNavbar === 'category' }"
|
|
to="/category"
|
|
>Category</nuxt-link
|
|
>
|
|
</li>
|
|
<li>
|
|
<nuxt-link
|
|
:class="{ underline: activeNavbar === 'archive' }"
|
|
to="/archive"
|
|
>Archive</nuxt-link
|
|
>
|
|
</li>
|
|
</ul>
|
|
<ul class="flex space-x-3 items-end">
|
|
<li>
|
|
<nuxt-link to="/">
|
|
<icon size="25px" name="uil:github" />
|
|
</nuxt-link>
|
|
</li>
|
|
<li>
|
|
<nuxt-link to="/">
|
|
<icon size="25px" name="uil:linkedin" />
|
|
</nuxt-link>
|
|
</li>
|
|
<li>
|
|
<nuxt-link to="/">
|
|
<icon size="25px" name="mdi:stackoverflow" />
|
|
</nuxt-link>
|
|
</li>
|
|
<li v-show="theme === 'light'" @click="theme = 'dark'">
|
|
<nuxt-link to="/">
|
|
<icon size="25px" name="ph:sun-dim" />
|
|
</nuxt-link>
|
|
</li>
|
|
<li v-show="theme === 'dark'" @click="theme = 'light'">
|
|
<nuxt-link to="/">
|
|
<icon size="25px" name="ph:moon-stars" />
|
|
</nuxt-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
</template>
|