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,5 +1,7 @@
 <script setup lang="ts">
+const route = useRoute()
 
+const path = computed(() => route.fullPath.replace('/', ''))
 </script>
 
 <template>
@@ -7,25 +9,25 @@
     <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 ">
         <li>
-          <NuxtLink to="/categories">
+          <NuxtLink to="/blogs" :class="{ underline: path === 'blogs' }">
-            Categories
+            Blogs
           </NuxtLink>
         </li>
         <li>
-          <NuxtLink to="/blogs">
+          <NuxtLink to="/categories" :class="{ underline: path === 'categories' }">
-            Archive
+            Categories
           </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>

pages/[...slug].vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Catch All Routes</h1>
+  </div>
+</template>