From 4de49fcb8fc2398e3399da7e72979983e0edf06b Mon Sep 17 00:00:00 2001
From: Daniel Gonzalez <danielhumgon@gmail.com>
Date: Fri, 24 Jan 2025 16:54:31 -0400
Subject: [PATCH] Small UX improvement to the navigation menu

---
 src/App.css                      |  8 ++++++++
 src/components/nav-menu/index.js | 25 ++++++++++++++++++++++---
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/App.css b/src/App.css
index 9de9d0f..be9d527 100644
--- a/src/App.css
+++ b/src/App.css
@@ -18,3 +18,11 @@
   align-items: center;
   gap: 10px;
 }
+
+.nav-link-active {
+  color: white !important;
+}
+
+.nav-link-inactive {
+  color: gray !important;
+}
diff --git a/src/components/nav-menu/index.js b/src/components/nav-menu/index.js
index 7b91099..23e8c4e 100644
--- a/src/components/nav-menu/index.js
+++ b/src/components/nav-menu/index.js
@@ -11,6 +11,7 @@ import { Nav, Navbar, Image } from 'react-bootstrap'
 import Logo from './psf-logo.png'
 
 function NavMenu (props) {
+  const selectedMenu = props.appData.menuState
   const handleClickEvent = (menuItem) => {
     // Pass the selected menu item up to the parent component.
     props.appData.setMenuState(menuItem)
@@ -27,9 +28,27 @@ function NavMenu (props) {
         <Navbar.Toggle aria-controls='responsive-navbar-nav' />
         <Navbar.Collapse id='responsive-navbar-nav'>
           <Nav className='mr-auto'>
-            <Nav.Link href='#' onClick={(e) => handleClickEvent(0)}>Check Balance</Nav.Link>
-            <Nav.Link href='#' onClick={(e) => handleClickEvent(1)}>Placeholder2</Nav.Link>
-            <Nav.Link href='#' onClick={(e) => handleClickEvent(2)}>Placeholder 3</Nav.Link>
+            <Nav.Link
+              className={selectedMenu === 0 ? 'nav-link-active' : 'nav-link-inactive'}
+              href='#'
+              onClick={(e) => handleClickEvent(0)}
+            >
+              Check Balance
+            </Nav.Link>
+            <Nav.Link
+              className={selectedMenu === 1 ? 'nav-link-active' : 'nav-link-inactive'}
+              href='#'
+              onClick={(e) => handleClickEvent(1)}
+            >
+              Placeholder2
+            </Nav.Link>
+            <Nav.Link
+              className={selectedMenu === 2 ? 'nav-link-active' : 'nav-link-inactive'}
+              href='#'
+              onClick={(e) => handleClickEvent(2)}
+            >
+              Placeholder 3
+            </Nav.Link>
           </Nav>
         </Navbar.Collapse>
       </Navbar>