Nav item not shown as active on sub-pages #109

New issue

Closed

opened 2026-06-02 15:42:52 +00:00 by Jessica-Sandler · 0 comments

Jessica-Sandler commented

2026-06-02 15:42:52 +00:00

(Migrated from github.com)

Describe the bug

The header marks a nav item as active only on an exact path match, so on a sub-page like a dataset detail page (/datasets/[datasetId]) no nav item is shown as active

Steps to reproduce

Go to Datasets (/datasets) — "Datasets" is shown as active.
Open a dataset detail page (/datasets/EGAD...).
"Datasets" is no longer marked as active.

Expected behavior

The active nav item stays marked as the current page on its sub-pages.

Additional context

Logic lives in Header.tsx. Noticed while working on loading skeletons (#93).
Possible starting point — treat a nav item as active on its sub-paths:

const isActive =
  pathname === link.href ||
  (link.href !== "/" && pathname.startsWith(link.href + "/"));

## Describe the bug The header marks a nav item as active only on an exact path match, so on a sub-page like a dataset detail page `(/datasets/[datasetId])` no nav item is shown as active ## Steps to reproduce 1. Go to **Datasets** (`/datasets`) — "Datasets" is shown as active. 2. Open a dataset detail page (`/datasets/EGAD...`). 3. "Datasets" is no longer marked as active. ## Expected behavior - [ ] The active nav item stays marked as the current page on its sub-pages. ## Additional context Logic lives in `Header.tsx`. Noticed while working on loading skeletons (#93). Possible starting point — treat a nav item as active on its sub-paths: ``` const isActive = pathname === link.href || (link.href !== "/" && pathname.startsWith(link.href + "/")); ```