ui(header): add active state indication for navigation links (#667)

ui(header): add active state styling for navigation links

Author: PRAteek-singHWY

application/frontend/src/scaffolding/Header/Header.tsx

@@ -3,6 +3,7 @@ import './header.scss';
 import { Menu, Search } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import { Button } from 'semantic-ui-react';
 
 import { ClearFilterButton } from '../../components/FilterButton/FilterButton';
@@ -48,21 +49,25 @@ export const Header = () => {
             </Link>
 
             <div className="navbar__desktop-links">
-              <Link to="/" className="nav-link">
+              <NavLink to="/" exact className="nav-link" activeClassName="nav-link--active">
                 Home
-              </Link>
-              <a href="/root_cres" className="nav-link">
+              </NavLink>
+
+              <NavLink to="/root_cres" className="nav-link" activeClassName="nav-link--active">
                 Browse
-              </a>
-              <Link to="/chatbot" className="nav-link">
+              </NavLink>
+
+              <NavLink to="/chatbot" className="nav-link" activeClassName="nav-link--active">
                 Chat
-              </Link>
-              <a href="/map_analysis" className="nav-link">
+              </NavLink>
+
+              <NavLink to="/map_analysis" className="nav-link" activeClassName="nav-link--active">
                 Map Analysis
-              </a>
-              <a href="/explorer" className="nav-link">
+              </NavLink>
+
+              <NavLink to="/explorer" className="nav-link" activeClassName="nav-link--active">
                 Explorer
-              </a>
+              </NavLink>
             </div>
 
             <div>
@@ -136,21 +141,51 @@ export const Header = () => {
         )}
 
         <div className="mobile-nav-links">
-          <Link to="/" className="nav-link" onClick={closeMobileMenu}>
+          <NavLink
+            to="/"
+            exact
+            className="nav-link"
+            activeClassName="nav-link--active"
+            onClick={closeMobileMenu}
+          >
             Home
-          </Link>
-          <a href="/root_cres" className="nav-link" onClick={closeMobileMenu}>
+          </NavLink>
+
+          <NavLink
+            to="/root_cres"
+            className="nav-link"
+            activeClassName="nav-link--active"
+            onClick={closeMobileMenu}
+          >
             Browse
-          </a>
-          <Link to="/chatbot" className="nav-link" onClick={closeMobileMenu}>
+          </NavLink>
+
+          <NavLink
+            to="/chatbot"
+            className="nav-link"
+            activeClassName="nav-link--active"
+            onClick={closeMobileMenu}
+          >
             Chat
-          </Link>
-          <a href="/map_analysis" className="nav-link" onClick={closeMobileMenu}>
+          </NavLink>
+
+          <NavLink
+            to="/map_analysis"
+            className="nav-link"
+            activeClassName="nav-link--active"
+            onClick={closeMobileMenu}
+          >
             Map Analysis
-          </a>
-          <a href="/explorer" className="nav-link" onClick={closeMobileMenu}>
+          </NavLink>
+
+          <NavLink
+            to="/explorer"
+            className="nav-link"
+            activeClassName="nav-link--active"
+            onClick={closeMobileMenu}
+          >
             Explorer
-          </a>
+          </NavLink>
         </div>
 
         <div className="mobile-auth">

application/frontend/src/scaffolding/Header/header.scss

@@ -66,6 +66,21 @@
       color: var(--foreground);
     }
   }
+  .nav-link--active {
+    color: var(--foreground);
+    position: relative;
+  }
+
+  .nav-link--active::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -0.5rem;
+    height: 2px;
+    background-color: #60a5fa; // same sky-blue theme
+    border-radius: 2px;
+  }
 }
 
 .navbar__actions {
@@ -254,6 +269,11 @@
         background-color: var(--muted);
       }
     }
+    .nav-link--active {
+      background-color: rgba(96, 165, 250, 0.18);
+      color: var(--foreground);
+      font-weight: 500;
+    }
   }
 
   .mobile-auth {