From 8422421f81e2e3645e405b02b266ed31a1872c7f Mon Sep 17 00:00:00 2001
From: Imad Bin Asad <imadbinasad1@gmail.com>
Date: Fri, 17 Mar 2023 23:23:24 +0530
Subject: [PATCH 1/2] Add underline hover in the navbar

---
 frontend/src/components/navbar/index.js   | 10 ++++-----
 frontend/src/styles/partials/_navbar.scss | 26 +++++++++++++++++++++++
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/navbar/index.js b/frontend/src/components/navbar/index.js
index b827d0e5..2659a213 100644
--- a/frontend/src/components/navbar/index.js
+++ b/frontend/src/components/navbar/index.js
@@ -63,9 +63,9 @@ class Navbar extends Component {
     listItems = listItems.map((path, index) => {
       if (path === "GSoC") {
         return (
-          <NavbarItem active={false} key={path}>
-            <Link to="http://gsoc.cloudcv.org" target="_blank">
-              {path}
+          <NavbarItem active={false} key={path} >
+            <Link to="http://gsoc.cloudcv.org" target="_blank" >
+              <span className="hover-underline-animation">{path}</span>
             </Link>
           </NavbarItem>
         );
@@ -74,7 +74,7 @@ class Navbar extends Component {
         return (
           <NavbarItem active={false} key={path}>
             <Link to="http://gci.cloudcv.org" target="_blank">
-              {path}
+            <span className="hover-underline-animation">{path}</span>
             </Link>
           </NavbarItem>
         );
@@ -83,7 +83,7 @@ class Navbar extends Component {
       let formattedPath = path.toLowerCase().replace(/ /g, "-");
       return (
         <NavbarItem active={active} key={path}>
-          <Link to={`/${formattedPath}`}>{path === "" ? "Home" : path}</Link>
+          <Link to={`/${formattedPath}`}>{path === "" ? <span className="hover-underline-animation">{"Home"}</span> : <span className="hover-underline-animation">{path}</span>}</Link>
         </NavbarItem>
       );
     });
diff --git a/frontend/src/styles/partials/_navbar.scss b/frontend/src/styles/partials/_navbar.scss
index 32b3b265..79aab265 100644
--- a/frontend/src/styles/partials/_navbar.scss
+++ b/frontend/src/styles/partials/_navbar.scss
@@ -73,6 +73,8 @@
           color: $secondary-color;
         }
 
+        
+
         a {
           display: block;
           padding: 0.5 * $gutter-width 0 0.5 * $gutter-width 0;
@@ -136,3 +138,27 @@
     }
   }
 
+  .hover-underline-animation {
+    display: inline-block;
+    position: relative;
+   
+    margin-top: -80px;
+  }
+  
+  .hover-underline-animation::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    transform: scaleX(0);
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    background-color: $secondary-color;
+    transform-origin: bottom right;
+    transition: transform 0.25s ease-out;
+  }
+  
+  .hover-underline-animation:hover::after {
+    transform: scaleX(1);
+    transform-origin: bottom left;
+  }
\ No newline at end of file

From 73e225468052da3d7cc70de579ec75a19d9ee21d Mon Sep 17 00:00:00 2001
From: Imad Bin Asad <imadbinasad1@gmail.com>
Date: Fri, 17 Mar 2023 23:38:35 +0530
Subject: [PATCH 2/2] Fix lints

---
 frontend/src/components/navbar/index.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/navbar/index.js b/frontend/src/components/navbar/index.js
index 2659a213..865ff37e 100644
--- a/frontend/src/components/navbar/index.js
+++ b/frontend/src/components/navbar/index.js
@@ -63,8 +63,8 @@ class Navbar extends Component {
     listItems = listItems.map((path, index) => {
       if (path === "GSoC") {
         return (
-          <NavbarItem active={false} key={path} >
-            <Link to="http://gsoc.cloudcv.org" target="_blank" >
+          <NavbarItem active={false} key={path}>
+            <Link to="http://gsoc.cloudcv.org" target="_blank">
               <span className="hover-underline-animation">{path}</span>
             </Link>
           </NavbarItem>
@@ -74,7 +74,7 @@ class Navbar extends Component {
         return (
           <NavbarItem active={false} key={path}>
             <Link to="http://gci.cloudcv.org" target="_blank">
-            <span className="hover-underline-animation">{path}</span>
+              <span className="hover-underline-animation">{path}</span>
             </Link>
           </NavbarItem>
         );
@@ -83,7 +83,13 @@ class Navbar extends Component {
       let formattedPath = path.toLowerCase().replace(/ /g, "-");
       return (
         <NavbarItem active={active} key={path}>
-          <Link to={`/${formattedPath}`}>{path === "" ? <span className="hover-underline-animation">{"Home"}</span> : <span className="hover-underline-animation">{path}</span>}</Link>
+          <Link to={`/${formattedPath}`}>
+            {path === "" ? (
+              <span className="hover-underline-animation">{"Home"}</span>
+            ) : (
+              <span className="hover-underline-animation">{path}</span>
+            )}
+          </Link>
         </NavbarItem>
       );
     });