From bb8209f99d436d9999663a45a3cfa5df448d1581 Mon Sep 17 00:00:00 2001
From: Sat Naing <satnaingdev@gmail.com>
Date: Sat, 10 Sep 2022 21:23:15 +0630
Subject: [PATCH] Update style to display active nav link

---
 src/components/Header.astro | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 1034c47..b94a57c 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,3 +1,11 @@
+---
+export interface Props {
+  activeNav?: "posts" | "tags" | "about";
+}
+
+const { activeNav } = Astro.props;
+---
+
 <header>
   <div class="nav-container">
     <div class="top-nav-wrap">
@@ -10,9 +18,19 @@
     </div>
     <nav class="display-none sm:flex">
       <ul>
-        <li><a href="/posts">Posts</a></li>
-        <li><a href="/tags">Tags</a></li>
-        <li><a href="/about">About</a></li>
+        <li>
+          <a href="/posts" class={activeNav === "posts" ? "active" : ""}
+            >Posts</a
+          >
+        </li>
+        <li>
+          <a href="/tags" class={activeNav === "tags" ? "active" : ""}>Tags</a>
+        </li>
+        <li>
+          <a href="/about" class={activeNav === "about" ? "active" : ""}
+            >About</a
+          >
+        </li>
       </ul>
       <div class="button-wrapper">
         <button>
@@ -72,6 +90,9 @@
   nav a {
     @apply py-2 px-3 font-medium hover:text-skin-accent;
   }
+  nav a.active {
+    @apply underline underline-offset-4 decoration-wavy decoration-2;
+  }
   .button-wrapper {
     @apply flex my-2 space-x-4 sm:space-x-2;
   }