Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
taichan03 merged 3 commits into from
Aug 15, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
82da7a3
feat: #331 - Add selected state to top nav items, including Admin Por…
StubberG3 Aug 15, 2025
00ae1d8
Revert "feat: #331 - Add selected state to top nav items, including A…
StubberG3 Aug 15, 2025
649f214
bugfix: #331 - Reapply commit 82da7a3 but without environment changes
StubberG3 Aug 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 12 additions & 10 deletions frontend/src/components/Header/FeatureMenuDropDown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -63,4 +65,4 @@ export const FeatureMenuDropDown = () => {
</div>
</div>
);
};
};
30 changes: 17 additions & 13 deletions frontend/src/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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
Expand Down Expand Up @@ -224,4 +228,4 @@ const mapStateToProps = (state: RootState) => ({
});

const ConnectedLayout = connect(mapStateToProps)(Header);
export default ConnectedLayout;
export default ConnectedLayout;
16 changes: 16 additions & 0 deletions frontend/src/components/Header/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}