Add background highlighting to Collection overview section when active

[ggeisler]

Currently when the user selects a node from the Collection contents tree, the component page for that node is displayed in the main content area and background highlighting is added to that node in the Collection contents tree. This highlighting helps the user understand what component is currently selected, and reinforces the association between the sidebar navigation element and its associated content in the main content area:

---

We should do the same thing for the Collection overview section, for the same reasons:

---

Some implications of this:

• When a collection page is first loaded (via a breadcrumb link, search result link, etc.), the first item in the collection overview nav should be highlighted.
• Anytime the collection sidebar is displayed, one (and only one) thing in it should be highlighted: either a nav item in Collection overview (when the Collection page is displayed in the main content area) or a node in the Collection contents tree (when a component is displayed in the main content area).
• The combination of the two points above are important in helping the user learn how the sidebar works in relation to the main content area, which can be a little non-intuitive at first because of how the collection and component details look very different in the main content area.

[thatbudakguy]

I feel like this might be a little more complicated than the ticket suggests, and we might need additional clarification to figure out how to do it right. Gary noted above:

When a collection page is first loaded (via a breadcrumb link, search result link, etc.), the first item in the collection overview nav should be highlighted.

...which doesn't seem to happen in #1339 if you load, for example, /catalog/aoa271 directly. That makes sense; when the page has initially loaded, none of the sidebar links have been clicked. The implication is that when viewing the collection, the first thing you see is the summary, so it should appear the same as if you'd already clicked "summary" (with the #summary anchor active).

This gets a little weird when you throw scrolling into it. If I scroll down the page to look at "background", the "summary" link will still be highlighted in the sidebar, even though I'm not "looking" at the summary section anymore. You don't notice this right now because the sidebar scrolls away along with the main content, but #1312 will make it sticky, so it'll be more obvious.

To me, the behavior that fits Gary's notes above is actually something more like bootstrap's scrollspy: highlight something based on where the user is currently "looking", i.e. what part of the page's content is currently in the viewport. That satisfies the conditions:

• something is always active/highlighted, because you're always "looking" at a part of the page
• when you scroll to a section of content farther down, the highlighted link automatically changes
• if you click something in the sidebar, you jump to that section (current behavior)

[marlo-longley]

Discussion: Justin's PR #1339 is a subset but perhaps not covering all the bullet points in this ticket.
We decided to wait to work on this ticket until Gary's return.

[ggeisler]

@thatbudakguy Yes, what I was suggesting is the scrollspy behavior. As you note, #1312 is also needed to make this behavior work in the most ideal way (ensures the user can always see the highlighted overview section that they've selected). I guess I assumed at the time that #1312 was pretty straightforward and that would be in place for this ticket to work with.

I'm not sure if I'm missing any other hurdles or concerns about doing this, but am happy to meet to discuss in more detail.