Implement persistent underline for top-level site section in left side navigation

[kennethyyoung]

Addresses #1303

Changes:
Implements a persistent underline for top-level navigation items (e.g., Reference, Examples, Tutorials). The underline remains active both on the top-level section page and while navigating through its sub-sections.

• Added a new variable currentPath, derived from pathMinusLocal, in index.astro
• Used .startsWith() to allow the underline to persist when the current path is a sub-section
• Apply "current" to MainNavLinks to trigger the underline style
• We are using the same linklabel style used in JumpToLinks.tsx. Updates to the underline style will change both the underline for top-level navigation and sub-section links.

PR Checklist

• npm run lint passes
• [Inline documentation] is included / updated
• [Unit tests] are included/updated

Collaborative contribution from:
@kennethyyoung, @mikeng07, and @aaronalaman as part of the April 2026 CodeDay Microinternship.

[ksen0]

Great work, team, thanks! I appreciate the compactness of the fix. I have tested locally and the materials here work:

• Contributor docs ✔️
• Examples ✔️
• Tutorials ✔️
• Reference ✔️

However there is additional nesting in Community and About that loses the info:

• /libraries/ should have Community underlined (also affects events)
• /code-of-conduct/ should have About underlined (also affects access statement)
• /education-resources/ should have Tutorials underlined (exception: if this is difficult to do or requires more than ~3 lines of code, I think this can be omitted. There is some ongoing discussion on moving this anyway, so please feel free to focus on the other parts if this requires too much of a workaround.)

cc @doradocodes @Nwakaego-Ego please feel free to test this out or share your thoughts too

[ksen0]

Hi @kennethyyoung, @mikeng07, and @aaronalaman! Just to check in (no rush from my side), are you working on updateing the fix based on the comments above / do you have any questions?

[kennethyyoung]

Hi @ksen0, we appreciate the patience! Our microinternship officially wrapped up on May 1st, so the team is currently coordinating who has the capacity to continuing working on this. A couple of us have expressed interest in resolving the issue and have a meeting planned soon.

Upon further exploration, here are the pages we found that are affected.

• Community links to /events/, /sketches/, and /libraries/.
• About links to /contribute/access, /code-of-conduct/, and /people/.
• Tutorial links to /education-resources/.
• Contribute links to /donate/.

Therefore the side panel should have an underline for the relevant pages.

I would like to clarify 2 pages.

1. One thing I noticed is the /access/ page is also a subsection of contribute (https://p5js.org/contribute/access/). In this case, would you like About to be underlined or Contribute?
2. Similarly for /code-of-conduct/. I am seeing "p5.js > Code of Conduct". Would you like this to underline About?

Thanks!

[ksen0]

Thanks so much for all the work @kennethyyoung ! Thanks for looking more into this.

One thing I noticed is the /access/ page is also a subsection of contribute (https://p5js.org/contribute/access/). In this case, would you like About to be underlined or Contribute?

Great catch, yes actually that is a "Contribute" page. That should be underlined, not About.

Similarly for /code-of-conduct/. I am seeing "p5.js > Code of Conduct". Would you like this to underline About?

I believe "About" should be underlined. But as I mentioned if this requires too awkward of a workaround, it could also be left as is (and we can make a separate issue someone could tackle at another point)

(If at some point you do want to hand it over to maintainers to finish up that is also an option, just let me know. But thanks a lot for the continued interest!)

[doradocodes]

@ksen0 What I'm thinking for the underline functionality:

I think that the Top level nav item should only be underlined if the nav item name is in the URL. For instance "Reference" would be underlined if the url is "https://p5js.org/reference/p5/arc/". Then it will be less confusing to understand/implement, otherwise you will have to create a series of edge cases, for instance, underlining "About" for "https://p5js.org/code-of-conduct/". If we really felt that "About" should be underline for /code-of-conduct, then we should update the URL to "https://p5js.org/about/code-of-conduct/".