refactor(www): refactor and simplify the sidebar

[tesseralis]

Description

Refactor and simplify the logic of the sidebar.

Changes:

• Create SidebarContext to store common data so we don't have to keep passing down components
• Accordion is now a function component whose uid is generated from item.title.
• Fix the hacky useCallback in <Item> used to scroll to the right item.
• Simplify a lot of duplicated logic for calculating active items/parents.
• get rid of unused isSingle prop

TODO:

• test the build to make sure everything actually works
• Perf test: Make sure things remain "snappy". Adding context + memoization can cause things to become slow in unexpected ways.

Motivation

• Clean up one of the most complex parts of the codebase.
• Prepare for an optimized sidebar for translation.

[tesseralis]

@fk There is one small UI change and I'm not sure if the original is intended or an error.

If you're on a page inside a top-level section (for example https://www.gatsbyjs.org/docs/recipes/working-with-plugins/) and close out its parent section, the top level looks like this:

But if you do the same thing to a deeper page (e.g. https://www.gatsbyjs.org/docs/sourcing-from-contentful/), its parent is rendered in purple:

I changed it so that the top level collapsed sections are in purple as well:

[fk]

I changed it so that the top level collapsed sections are in purple as well:

👍 🙏 Another great catch, Nat! 🙏
LG, and makes sense TM! ;).
(Esp. since it seems to be the only case where we're inconsistent:
)

[AishaBlake]

Looking good! These changes make sense to me. Way to leave things better than you found them! :D