Update header and add catch all route page

Signed-off-by: Al Asad Nur Riyad <asadnurriyad@gmail.com>

components/archive/hero.vue

@@ -3,7 +3,7 @@
     <div class="grid grid-cols-1 sm:grid-cols-2 items-center">
       <div class="px-6">
         <h1 class="text-black font-semibold leading-tight text-4xl md:text-5xl my-5">
-          Archive
+          All Blogs
         </h1>
         <p>Here you will find all the blog posts I have written & published on this site.</p>
       </div>

components/main/header.vue

@@ -1,31 +1,33 @@
 <script setup lang="ts">
+const route = useRoute()
 
+const path = computed(() => route.fullPath.replace('/', ''))
 </script>
 
 <template>
   <div class="py-5 border-b text-zinc-700">
-    <div class="flex px-6 container max-w-5xl justify-between mx-auto items-baseline">
+    <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="">
-          <NuxtLink to="/" class="text-2xl text-black font-bold">
+          <NuxtLink to="/" class="text-2xl text-black font-bold " :class="{ underline: path === '' }">
             Home
           </NuxtLink>
         </li>
       </ul>
-      <ul class="flex items-center space-x-3 font-bold">
+      <ul class="flex items-center space-x-3 font-bold ">
         <li>
-          <NuxtLink to="/categories">
+          <NuxtLink to="/blogs" :class="{ underline: path === 'blogs' }">
+            Blogs
+          </NuxtLink>
+        </li>
+        <li>
+          <NuxtLink to="/categories" :class="{ underline: path === 'categories' }">
             Categories
           </NuxtLink>
         </li>
-        <li>
-          <NuxtLink to="/blogs">
-            Archive
-          </NuxtLink>
-        </li>
-        <li title="About Me">
+        <li title="About Me" :class="{ underline: path === 'myself' }">
           <NuxtLink to="/myself" aria-label="About me">
-            Myself
+            About Me
           </NuxtLink>
         </li>
       </ul>