Skip to content

DashboardShell's active-nav-item highlighting uses exact pathname equality, so nested routes never highlight their parent section #220

Description

@chonilius

src/components/dashboard/DashboardShell.tsx determines the active sidebar item with:

const active = pathname === item.href;

This is an exact string match. The maintainer/sponsor nav includes items like
{ label: "Bounty pipeline", href: "/issues", icon: GitPullRequest } and
{ label: "Milestones", href: "/milestones", icon: Milestone }. When a maintainer
navigates from the pipeline board into a specific bounty (/issues/abc123, reached via
PipelineBoard.tsx's own links), pathname becomes /issues/abc123, which is not
=== "/issues" — so "Bounty pipeline" loses its active/highlighted state exactly while
the user is drilled into a page that's conceptually still part of that section, with no
other sidebar item taking its place.

The result is a sidebar that appears to have "nothing selected" whenever the user is on
any nested route under a top-level nav destination, which is a common and expected
navigation state (viewing one bounty out of the pipeline) that this exact-match check
doesn't account for.

Suggested fix: use a prefix check for non-root items (pathname === item.href || pathname.startsWith(item.href + "/"))
so nested routes keep their parent section highlighted, while still using exact matching
for /dashboard/* overview links so they don't stay highlighted while browsing unrelated
sections.

Metadata

Metadata

Assignees

Labels

Stellar WaveIssues in the Stellar wave programbugSomething isn't workingenhancementNew feature or requestgood first issueGood for newcomershelp wantedExtra attention is needed

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions