From b519903c0d7ff248c18a301a10b3345a018b9f17 Mon Sep 17 00:00:00 2001
From: nurRiyad <asadnurriyad@gmail.com>
Date: Wed, 30 Oct 2024 23:46:11 +0600
Subject: [PATCH] Fix active link issue in navbar

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
---
 components/main/header.vue | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/components/main/header.vue b/components/main/header.vue
index c968880..1f73e4c 100644
--- a/components/main/header.vue
+++ b/components/main/header.vue
@@ -5,6 +5,11 @@ const colorMode = useColorMode()
 function onClick(val: string) {
   colorMode.preference = val
 }
+
+const route = useRoute()
+function isActive(path: string) {
+  return route.path.startsWith(path)
+}
 </script>
 
 <template>
@@ -12,24 +17,24 @@ function onClick(val: string) {
     <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="/">
+          <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">
+          <NuxtLink to="/blogs" :class="{ underline: isActive('/blogs') }">
             Blogs
           </NuxtLink>
         </li>
         <li>
-          <NuxtLink to="/categories">
+          <NuxtLink to="/categories" :class="{ underline: isActive('/categories') }">
             Categories
           </NuxtLink>
         </li>
         <li title="About Me">
-          <NuxtLink to="/about" aria-label="About me">
+          <NuxtLink to="/about" aria-label="About me" :class="{ underline: $route.path === '/about' }">
             About
           </NuxtLink>
         </li>
@@ -63,9 +68,3 @@ function onClick(val: string) {
     </div>
   </div>
 </template>
-
-<style>
-.router-link-active .router-link-exact-active  {
-  @apply underline
-}
-</style>