Desktop Sidebar: Active Section

[alexrcabral]

Appearance 

When a particular section on the page is active, the corresponding menu item in the sidebar of the dashboard should be active 

When a menu item is active, this should be denoted by the following: 

• Visual differentiation as shown in the mockup (font color ~#3A335E and bolding) 
• Alt Text: "Current: " should be appended before the menu item. E.g. "Current: Example Sets" or "Current: My Solution Sets" 

Behavior

A given menu item should become active if you scroll to it. On page load, when the user is at the top of the screen, this should be the top menu item. When the user scrolls down so that the next heading is at least 50% up the page, this should change the active menu item to the one matching the new heading. When scrolling up, the opposite should happen: when the previous heading goes beneath the midpoint of the page (the section above takes up >50% of the page), the new active menu item should match the heading of the new section. 

Reference

Style Guide: https://invis.io/CQYLLW8J49U
Fonts: https://www.dropbox.com/sh/c12m6ufweyds20d/AAAdXNPOt8e52DkSAr9pd-a-a/Fonts?dl=0

Acceptance criteria: 

Given that I'm a user on a screen wide enough to view the sidebar, I should encounter the current section I'm in as active in the sidebar. When I click a different section and it moves to the new section, this new section's sidebar link should be active. Alternatively, when I scroll to a new section, this should similarly update the active sidebar link. 

[abaranowska1]

Tested

• Given that I'm a user on a screen wide enough to view the sidebar, I encounter the current section I'm in as active in the sidebar
• When I click a different section and it moves to the new section, this new section's sidebar link is active
• Alternatively, when I scroll to a new section, this similarly updates the active sidebar link