right nav highlighting jumps to end

[neuromusic]

from June 2020 pre-launch bug bash

Created by: justin

Description

when I click the next-to-last item on the right nav, if the last two sections are short, the last item gets highlighted. this happens on the about page as well as plugin pages

Info

Bug source: wide

Browser: chrome

PR: none

Attachments

https://dl.airtable.com/.attachments/f1adb5121031e79c3bdb51bfc8e8d8b7/c9fe1aa4/image.png

[codemonkey800]

@neuromusic This is because if the content is short enough, it'll default to the last item. This is to mirror the behavior of the current theme for napari.org:

napari-org-scroll.mp4

You can also see the same issue on the About Team page for napari:

---

Another thing we could do is implement it similar to Docusaurus, but it means that if the last section's content is long enough, then it'll never get highlighted:

docusaurus-scrolling.mp4

I guess ultimately, what should be the correct behavior for the last section when content isn't long enough? cc: @liaprins-czi

[codemonkey800]

@liaprins-czi I also tagged you in case you had an idea on what the behavior should be 😃

[liaprins-czi]

This is to mirror the behavior of the current theme for napari.org

Just FYI, that is just how the default functionality of the theme we are using (temporarily) is, but it was not intentionally chosen to be that way (by me, at least, lol). When implementing the final napari.org design, it should match the hub design, however we end up doing it:

The way I'd want it to act might be a conflict of two competing functionalities, so might not be possible but let me know:

1. • When scrolling, the nav items selection treatment corresponds to which section you're "in" as defined by which section the top of screen is "inside" of.
2. • However, when you click a nav item, it scrolls you to it (or to bottom of page if too short for it's top to reach top of screen), and the nav item you clicked shows it is selected. So clicking specific nav item overrides previous scroll-specific instructions in bullet above. (This does mean if user scrolled a tiny bit when viewing a too-short last section, the nav would revert back to showing the selection being whichever section the top of window was "inside", as described in first bullet.)

And it does seem that is what it is doing now in the hub! When you click a section, it also adds that section's URL#hash, which I also expect. The one thing that seems buggy to me is if I am using very tall window and I:

1. Click the nav item to go to the last section: ✅ as expected, it applies selection style to nav item and jumps me to bottom of page (as close as it can to top of the last section)
2. But from there when I click the second-to-last item in the nav:❗️it does not apply selected style to the clicked-nav item (instead keeps same style on last section's nav item). The treatment should change to show second-to-last section's nav item in selected treatment. (Also the page doens't scroll, but that's to be expected because the second-to-last section is also too short to touch the top... but if it's not too short then it should).