From c0205468732e25c20f78e1c389fafdd9995d3f7d Mon Sep 17 00:00:00 2001
From: Leslie Yip <leslieyip02@gmail.com>
Date: Mon, 29 Jan 2024 14:44:48 +0800
Subject: [PATCH] KAN-3 Add animation for navbar links

---
 src/layout/NavigationMenuItem.css | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/layout/NavigationMenuItem.css b/src/layout/NavigationMenuItem.css
index 34c08ef..92341ef 100644
--- a/src/layout/NavigationMenuItem.css
+++ b/src/layout/NavigationMenuItem.css
@@ -3,11 +3,31 @@
     relative
     font-heading
     p-4
-    md:px-0
+    md:p-0
     text-black
     hover:scale-[1.1]
     hover:rounded-md
-    hover:bg-gray-100
+    hover:bg-slate-100
     md:hover:bg-transparent
   ;
 }
+
+.navigation-menu-item::before {
+  content: '';
+
+  @apply
+    absolute
+    block
+    w-full
+    h-0.5
+    bottom-0
+    left-0
+    bg-outline
+    transition-transform
+    duration-300
+    ease-out
+    scale-x-0
+    origin-top-left
+    hover:md:scale-x-100
+  ;
+}