Skip to content

fix(navbar): correct active nav state and standardize glass effect#2536

Open
yachikadev wants to merge 1 commit into
Umbrella-io:mainfrom
yachikadev:fix/navbar-2207
Open

fix(navbar): correct active nav state and standardize glass effect#2536
yachikadev wants to merge 1 commit into
Umbrella-io:mainfrom
yachikadev:fix/navbar-2207

Conversation

@yachikadev

Copy link
Copy Markdown
Contributor

Closes #2207 — Navbar active state and visual consistency issues

Problem

  1. The active nav item didn't always match the current route — Overview stayed
    highlighted even after navigating to Resume or Leaderboard.
  2. The navbar appeared with a solid background on initial load on the Overview
    page, only switching to the blurred/glass effect after scrolling, while
    Resume and Leaderboard showed the glass effect from the start.

Root cause

  • isActivePath() matched /dashboard using pathname.startsWith(), which
    also matched /dashboard/career-intelligence, keeping "Overview" active on
    every dashboard sub-route.
  • (Investigated further) No route-specific styling was found that explained
    the blue-background flash — it appears to have been tied to the same
    startsWith-based logic / stale build artifacts rather than a separate
    conditional background. Standardized the navbar style application to be
    fully route-agnostic going forward.

Fix

  • Added an exact-match special case for /dashboard in isActivePath() so
    each dashboard route only highlights its own nav item.
  • Confirmed the navbar's scrolled-based background/blur logic in
    AppNavbar.tsx is applied identically regardless of route, removing any
    route-dependent styling divergence.

Testing

  • Verified active tab updates correctly across /dashboard,
    /dashboard/career-intelligence, and /leaderboard.
  • Verified navbar background is transparent → blurred (on scroll) consistently
    on all three routes from initial load.
  • Tested on page refresh and during navigation between dashboard routes.

Note for reviewers

Unrelated observation: TokenRevokedBanner and AppNavbar both use
position: fixed/sticky, top: 0, z-50, which could cause overlap when the
token-revoked banner shows. Not fixed here — flagging for a separate issue if
needed.

@github-actions github-actions Bot added gssoc26 GSSoC 2026 contribution type:bug GSSoC type bonus: bug fix labels Jun 17, 2026
@github-actions

Copy link
Copy Markdown

GSSoC Label Checklist 🏷️

@Umbrella-io — please apply the appropriate labels before merging:

Difficulty (pick one):

  • level:beginner — 20 pts
  • level:intermediate — 35 pts
  • level:advanced — 55 pts
  • level:critical — 80 pts

Quality (optional):

  • quality:clean — ×1.2 multiplier
  • quality:exceptional — ×1.5 multiplier

Validation (required to score):

  • gssoc:approved — counts for points
  • gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

@github-actions github-actions Bot added type:feature GSSoC type bonus: new feature type:design GSSoC type bonus: UI/design (+10 pts) type:performance GSSoC type bonus: performance (+15 pts) labels Jun 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc26 GSSoC 2026 contribution type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts) type:feature GSSoC type bonus: new feature type:performance GSSoC type bonus: performance (+15 pts)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] Navbar active state and visual consistency issues across dashboard pages

1 participant