From f25c4dff8c9e95804918688fbd67e693ad7d8c9b Mon Sep 17 00:00:00 2001
From: Al Asad Nur Riyad <asadnurriyad@gmail.com>
Date: Thu, 4 May 2023 02:23:50 +0600
Subject: [PATCH] Update header and add catch all route page

Signed-off-by: Al Asad Nur Riyad <asadnurriyad@gmail.com>
---
 components/archive/hero.vue |  2 +-
 components/main/header.vue  | 24 +++++++++++++-----------
 pages/[...slug].vue         |  5 +++++
 3 files changed, 19 insertions(+), 12 deletions(-)
 create mode 100644 pages/[...slug].vue

diff --git a/components/archive/hero.vue b/components/archive/hero.vue
index 254534d..b21c6bc 100644
--- a/components/archive/hero.vue
+++ b/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>
diff --git a/components/main/header.vue b/components/main/header.vue
index 036784d..62eb115 100644
--- a/components/main/header.vue
+++ b/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>
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
new file mode 100644
index 0000000..c7f8fb1
--- /dev/null
+++ b/pages/[...slug].vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Catch All Routes</h1>
+  </div>
+</template>