Skip to content

add active link indicator #812

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

Closed
Khushi281300 wants to merge 2 commits into from
Closed

add active link indicator #812

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1d5db88
feat(navbar): add active link indicator (underline + white highlight)…
Khushi281300 Mar 15, 2026
a214279
Merge branch 'main' into feat/navbar-active-647
Khushi281300 Mar 26, 2026
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
60 changes: 52 additions & 8 deletions application/frontend/src/scaffolding/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,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 { Link, NavLink, useHistory, useLocation } from 'react-router-dom';
import { Button } from 'semantic-ui-react';

import { ClearFilterButton } from '../../components/FilterButton/FilterButton';
Expand All @@ -20,10 +19,18 @@ export const Header = ({ capabilities }: HeaderProps) => {

let currentUrlParams = new URLSearchParams(window.location.search);
const history = useHistory();
const location = useLocation();
const HandleDoFilter = () => {
currentUrlParams.set('applyFilters', 'true');
history.push(window.location.pathname + '?' + currentUrlParams.toString());
};

const isActive = (path: string, exact: boolean = false) => {
if (exact) {
return location.pathname === path;
}
return location.pathname.startsWith(path);
};
const { showFilter } = useLocationFromOutsideRoute(routes);

const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
Expand Down Expand Up @@ -56,27 +63,58 @@ export const Header = ({ capabilities }: HeaderProps) => {
</Link>

<div className="navbar__desktop-links">
<NavLink to="/" exact className="nav-link" activeClassName="nav-link--active">
<NavLink
to="/"
exact
className="nav-link"
activeClassName="nav-link--active"
isActive={() => isActive('/', true)}
>
Home
</NavLink>

<NavLink to="/root_cres" className="nav-link" activeClassName="nav-link--active">
<NavLink
to="/root_cres"
className="nav-link"
activeClassName="nav-link--active"
isActive={() => isActive('/root_cres') || isActive('/node')}
>
Browse
</NavLink>

<NavLink to="/chatbot" className="nav-link" activeClassName="nav-link--active">
<NavLink
to="/chatbot"
className="nav-link"
activeClassName="nav-link--active"
isActive={() => isActive('/chatbot')}
>
Chat
</NavLink>

<NavLink to="/map_analysis" className="nav-link" activeClassName="nav-link--active">
<NavLink
to="/map_analysis"
className="nav-link"
activeClassName="nav-link--active"
isActive={() => isActive('/map_analysis')}
>
Map Analysis
</NavLink>

<NavLink to="/explorer" className="nav-link" activeClassName="nav-link--active">
<NavLink
to="/explorer"
className="nav-link"
activeClassName="nav-link--active"
isActive={() => isActive('/explorer')}
>
Explorer
</NavLink>
{capabilities.myopencre && (
<NavLink to="/myopencre" className="nav-link" activeClassName="nav-link--active">
<NavLink
to="/myopencre"
className="nav-link"
activeClassName="nav-link--active"
isActive={() => isActive('/myopencre')}
>
MyOpenCRE
</NavLink>
)}
Expand Down Expand Up @@ -158,6 +196,7 @@ export const Header = ({ capabilities }: HeaderProps) => {
exact
className="nav-link"
activeClassName="nav-link--active"
isActive={() => isActive('/', true)}
onClick={closeMobileMenu}
>
Home
Expand All @@ -167,6 +206,7 @@ export const Header = ({ capabilities }: HeaderProps) => {
to="/root_cres"
className="nav-link"
activeClassName="nav-link--active"
isActive={() => isActive('/root_cres') || isActive('/node')}
onClick={closeMobileMenu}
>
Browse
Expand All @@ -176,6 +216,7 @@ export const Header = ({ capabilities }: HeaderProps) => {
to="/chatbot"
className="nav-link"
activeClassName="nav-link--active"
isActive={() => isActive('/chatbot')}
onClick={closeMobileMenu}
>
Chat
Expand All @@ -185,6 +226,7 @@ export const Header = ({ capabilities }: HeaderProps) => {
to="/map_analysis"
className="nav-link"
activeClassName="nav-link--active"
isActive={() => isActive('/map_analysis')}
onClick={closeMobileMenu}
>
Map Analysis
Expand All @@ -194,6 +236,7 @@ export const Header = ({ capabilities }: HeaderProps) => {
to="/explorer"
className="nav-link"
activeClassName="nav-link--active"
isActive={() => isActive('/explorer')}
onClick={closeMobileMenu}
>
Explorer
Expand All @@ -203,6 +246,7 @@ export const Header = ({ capabilities }: HeaderProps) => {
to="/myopencre"
className="nav-link"
activeClassName="nav-link--active"
isActive={() => isActive('/myopencre')}
onClick={closeMobileMenu}
>
MyOpenCRE
Expand Down
9 changes: 6 additions & 3 deletions application/frontend/src/scaffolding/Header/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,9 @@
}
}
.nav-link--active {
color: var(--foreground);
color: #ffffff; // White highlight for active links
position: relative;
font-weight: 600; // Bold font weight
}

.nav-link--active::after {
Expand All @@ -90,6 +91,7 @@
height: 2px;
background-color: #60a5fa; // same sky-blue theme
border-radius: 2px;
transition: all 0.3s ease-in-out;
}
}

Expand Down Expand Up @@ -281,8 +283,9 @@
}
.nav-link--active {
background-color: rgba(96, 165, 250, 0.18);
color: var(--foreground);
font-weight: 500;
color: #ffffff; // Consistent white highlight
font-weight: 600;
transition: background-color 0.3s ease;
}
}

Expand Down