Desktop Sidebar: Active Section #1639
Description
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.