🟡 As a visitor, I can recognize where I am in relation to the whole page

[jstrothman]

Background
The USDS Discovery Sprint Guide, which also uses the Federalist template with sidenav, highlights the active sidenav section as you scroll. This would help our readers, particularly on our very long pages.
Should we do something a bit more visible than the default darker gray/bold treatment for the active link?

Acceptance criteria

• As you scroll the Research > Plan or Do page (examples of long pages), the side navigation highlights as you scroll
• On small screens, the new highlighting functionality may still work, but does not impact the links present at page top

Tasks

• Design treatment
• Implement

Definition of done

• One of the POs has approved the change

[juliaklindpaintner]

If this enhancement is done, it should be implemented across all guides.

[bpdesigns]

@cantsin how large of a task is this? Low priority but if low effort then perhaps we pick it up

[cantsin]

Ooh if we do this, https://guides.18f.gov/engineering/tools/project-setup/ might be a good test page. it looks like USWDS uses javascript to add usa-current class attributes to the sidenav. That code might be here: https://github.com/uswds/uswds/blob/develop/packages/usa-in-page-navigation/src/index.js -- assuming that our guides are up to date wrt USWDS versions (and we seem to be on 3.8.0 compared to the latest version 3.8.1) I think this could be potentially a minor lift. But. I'm not sure why this isn't enabled by default.

Maybe we can have an engineer pair with a designer on this one?

[bpdesigns]

That would be great to have a pairing ticket :) - moving this to candidate for prioritization

[bpdesigns]

If we discover a bug - consider an upstream bug fix :)

[a-chappelear]

I would stick with the bold active link style used in the example/screenshot above. I'm hesitant to suggest a new link style not already in the design system, in response to the issue's comment "Should we do something a bit more visible than the default darker gray/bold treatment for the active link" @caleywoods @bpdesigns (thoughts?)

[bpdesigns]

I agree unless there is a reason existing styles won't work

[caleywoods]

@a-chappelear @bpdesigns @cantsin

James, the USWDS GitHub link you listed is for the in-page navigation component which differs from the sidenav component. I dug into the USDS site and they have a setCurrentLink within app.js. It seems reasonable that we could duplicate this code in our own JavaScript and get it to work with some tweaking.

https://sprint.usds.gov/assets/js/app.js - The odd bit here is I don't see this in their codebase (the file or the code) after spending a few minutes looking.

Edit: Here's the code in app.js I was looking for, different repo: https://github.com/usds/discovery-sprint-guide/blob/main/assets/js/app.js#L10

[caleywoods]

If we discover a bug - consider an upstream bug fix :)

No upstream bugfix here, the out of the box navigation highlight code works for the in page navigation component but the navigation component being used for the guides site (and most 11ty sites based on the original template used) is the side navigation component which doesn't support the highlighting out of the box.