persist nav state

[indirectlylit]

Description

Persist side nav bar scroll position and filter state using Window.sessionStorage, which should be per-tab.

Issue addressed

fixes #182

Before/after screenshots

before	after

Steps to test

Experiment with navigation through the design system and see how it feels

(optional) Implementation notes

At a high level, how did you implement this?

• Persists changes to state
• Loads state on mounted

Does this introduce any tech-debt items?

• Tries to keep the nav hidden until state has been loaded but doesn't always work as intended
• There's a brief flash during page load

Reviewer guidance

• Is the code clean and well-commented?
• Are there tests for this change?
• Are all UI components LTR and RTL compliant (if applicable)?
• Add other things to check for here

Comments

[marcellamaki]

This seems to be working as you describe and after just navigating around a bit, it definitely feels better to have the sidebar not lose its place. One thing I noticed was I found the search filter persisting after I hit the back button to be a bit surprising. I don't even know why this stood out to me - I just expected the filter to clear.

To me this isn't a blocker and the benefits of these updates outweigh this - mostly just sharing because I'm curious if someone knows about some design/UX convention where I may have subliminally picked this up 😆 Looks good, though!

[indirectlylit]

Thanks for testing!

One thing I noticed was I found the search filter persisting after I hit the back button to be a bit surprising. I don't even know why this stood out to me - I just expected the filter to clear.

That's interesting, thanks. I debated doing it both ways and this seemed convenient for navigating within a group of related items ('button' was the filter term I used a lot.)

Let's raise it as a question/tension in the next tactical.

[indirectlylit]

One idea: could persist trailing debounced changes (wait time ~2s) to the filter as query string changes and push them onto the browser history stack.

For example:

URL	action
/	first URL
/?filter=button	after enter 'button' into ToC filter
/kbutton?filter=button	after clicking KButton entry
/?filter=button	browser back
/	browser back

[nucleogenesis]

<3

[indirectlylit]

created follow-up issue here: #213