feat(Demo) - Navigation aware sidebar - Githubissues

newrelic / nr1-community

An open-source library of useful components for building on New Relic One's programmability platform.

https://developer.newrelic.com

Apache License 2.0

11 stars 12 forks source link

feat(Demo) - Navigation aware sidebar #21

Open devfreddy opened 4 years ago

devfreddy commented 4 years ago

Summary

The original design https://www.figma.com/proto/YAkXjlXfvOZaWaKtIEQynq/NR1-Community?node-id=1%3A1372&viewport=-306%2C237%2C0.8856343030929565&scaling=min-zoom calls for a sidebar navigation allowing for easier access to headers in the documentation.

Desired Behaviour

A user is contextually aware based on the currently highlighted item in the sidebar navigation
Clicking one of the items in the sidebar takes the user to that header in the documentation

Possible Solution

Assuming a similar structure to what we have currently we would need to:

Define a set of headers/children for navigation items from the main body of example code
Derive an aggregate of headers included in the README.md of the component
Merge these two together into one navigation tree for the sidebar
Add visibility awareness in the documentation to both
Upon become visible or being clicked, navigate to the correct header

Currently we have some visibility awareness handler/callbacks for the Markdown headers.