Merge pull request #354 from StubberG3/balancer/331/top-nav-selected

feat: #331 - Add selected state to top nav items, including Admin Portal dropdown

Author: taichan03

frontend/src/components/Header/FeatureMenuDropDown.tsx

@@ -1,37 +1,39 @@
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 
 export const FeatureMenuDropDown = () => {
+  const location = useLocation();
+  const currentPath = location.pathname;
   return (
     <div className="h-50 absolute top-full mb-2 mt-2 flex  flex-row items-center rounded-lg border-2 bg-white font-inter text-sm sm:px-6 md:px-8 lg:px-8 xl:px-6 ">
       <div className="mx-3 my-5 ">
         <Link to="/AdminPortal">
-          <ul className=" cursor-pointer  rounded-lg p-3 transition duration-300 hover:bg-gray-100">
-            <span className=" font-bold text-black  ">Manage files</span>
+          <ul className={currentPath === "/AdminPortal" ? "subheader-nav-item subheader-nav-item-selected" : "subheader-nav-item"}>
+            <span className="font-bold">Manage files</span>
 
             <div className="mt-1 font-satoshi text-sm text-gray-400">
-              Mange and chat with files.
+              Manage and chat with files
             </div>
           </ul>
         </Link>
         <Link to="/rulesmanager">
-          <ul className=" cursor-pointer  rounded-lg p-3 transition duration-300 hover:bg-gray-100">
-            <span className=" font-bold text-black  ">Manage rules</span>
+          <ul className={currentPath === "/rulesmanager" ? "subheader-nav-item subheader-nav-item-selected" : "subheader-nav-item"}>
+            <span className="font-bold">Manage rules</span>
 
             <div className="mt-1 font-satoshi text-sm text-gray-400">
               Manage list of rules
             </div>
           </ul>
         </Link>
         <Link to="/ManageMeds">
-          <ul className=" cursor-pointer  rounded-lg p-3 transition duration-300 hover:bg-gray-100">
-            <span className=" font-bold text-black  ">Manage meds</span>
+          <ul className={currentPath === "/ManageMeds" ? "subheader-nav-item subheader-nav-item-selected" : "subheader-nav-item"}>
+            <span className="font-bold">Manage meds</span>
 
             <div className="mt-1 font-satoshi text-sm text-gray-400">
               Manage list of meds
             </div>
           </ul>
         </Link>
-        {/* 
+        {/*
         <Link to="/drugSummary">
           <ul className=" cursor-pointer rounded-lg p-3 transition duration-300 hover:bg-gray-100">
             <span className=" font-bold text-black ">Manage Prompts</span>
@@ -63,4 +65,4 @@ export const FeatureMenuDropDown = () => {
       </div>
     </div>
   );
-};
+};

frontend/src/components/Header/Header.tsx

@@ -1,7 +1,7 @@
 import {useState, useRef, useEffect, Fragment} from "react";
 // import { useState, Fragment } from "react";
 import accountLogo from "../../assets/account.svg";
-import {Link, useNavigate} from "react-router-dom";
+import {Link, useNavigate, useLocation} from "react-router-dom";
 import LoginMenuDropDown from "./LoginMenuDropDown";
 import "../../components/Header/header.css";
 import Chat from "./Chat";
@@ -98,6 +98,9 @@ const Header: React.FC<LoginFormProps> = ({
         navigate("/");
     };
 
+    const location = useLocation();
+    const currentPath = location.pathname;
+
     return (
         <header className="z-50 fixed w-full items-center no-print">
             <div className="hidden w-full items-center justify-center border-b border-gray-300 bg-blue-100 p-1 text-center text-sm font-light text-gray-500 lg:flex">
@@ -136,38 +139,38 @@ const Header: React.FC<LoginFormProps> = ({
                     <Link
                         to="/"
                         onClick={() => handleForm()}
-                        className="  text-black hover:border-blue-600 hover:text-blue-600 hover:no-underline"
+                        className={currentPath === "/" ? "header-nav-item header-nav-item-selected" : "header-nav-item"}
                     >
                         Medication Suggester
                     </Link>
                     <>
                         <Link
                             to="/medications"
-                            className=" text-black hover:border-blue-600 hover:text-blue-600 hover:no-underline"
+                            className={currentPath === "/medications" ? "header-nav-item header-nav-item-selected" : "header-nav-item"}
                         >
                             Medication List
                         </Link>
                         <Link
                             to="/about"
-                            className="  text-black hover:border-blue-600 hover:text-blue-600 hover:no-underline"
+                            className={currentPath === "/about" ? "header-nav-item header-nav-item-selected" : "header-nav-item" }
                         >
                             About
                         </Link>
                         <Link
                             to="/help"
-                            className=" text-black hover:border-blue-600 hover:text-blue-600 hover:no-underline"
+                            className={currentPath === "/help" ? "header-nav-item header-nav-item-selected" : "header-nav-item" }
                         >
                             Help
                         </Link>
                         <Link
                             to="/feedback"
-                            className=" text-black hover:border-blue-600 hover:text-blue-600 hover:no-underline"
+                            className={currentPath === "/feedback" ? "header-nav-item header-nav-item-selected" : "header-nav-item" }
                         >
                             Leave Feedback
                         </Link>
                         <a href="https://www.flipcause.com/secure/cause_pdetails/MjMyMTIw"
                           target="_blank"
-                          className="text-black hover:border-blue-600 hover:text-blue-600 hover:no-underline"
+                          className="header-nav-item"
                         >
                           Donate
                         </a>
@@ -179,11 +182,12 @@ const Header: React.FC<LoginFormProps> = ({
                                 className=""
                             >
                 <span
-                    className={` text-black ${
-                        showFeaturesMenu
-                            ? "cursor-pointer border-b-2 border-blue-600 hover:border-b-2 hover:border-blue-600 hover:text-blue-600 hover:no-underline"
-                            : "cursor-pointer hover:border-b-2 hover:border-blue-600 hover:text-black hover:no-underline"
-                    }`}
+                    className={`header-nav-item ${
+                        showFeaturesMenu && "text-blue-600"
+                    } ${
+                        (currentPath === "/rulesmanager" || currentPath === "/ManageMeds") && "header-nav-item-selected"
+                    }`
+                  }
                 >
                   Admin Portal
                   <span
@@ -224,4 +228,4 @@ const mapStateToProps = (state: RootState) => ({
 });
 
 const ConnectedLayout = connect(mapStateToProps)(Header);
-export default ConnectedLayout;
+export default ConnectedLayout;

frontend/src/components/Header/header.css

@@ -21,3 +21,19 @@
 .arrow:hover {
   animation: none;
 }
+
+.header-nav-item {
+  @apply text-black border-transparent border-b-2 hover:border-blue-600 hover:text-blue-600 hover:border-b-2 hover:border-blue-600;
+}
+
+.header-nav-item.header-nav-item-selected {
+  @apply text-blue-600;
+}
+
+.subheader-nav-item {
+  @apply cursor-pointer rounded-lg p-3 transition duration-300 hover:bg-gray-100;
+}
+
+.subheader-nav-item.subheader-nav-item-selected {
+  @apply text-blue-600;
+}