Recommendations for SectionedNavgation

[katydecorah]

While examining the SectionedNavgation component I noticed a few patterns that may be confusing:

1. The navbar's links have two different outcomes: the headers link within the page while the following links open a new page. I would expect that all links stay on the page or all links go to a new page.
2. Since the navbar duplicates information within the content section, it's almost like we have two views competing on the page.
3. In some instances the side navbar is long and requires a scrollbar. Users are potentially scrolling twice to navigate similar information.

Recommendation:

• Only show the header links in the navbar and have them only link within the page. Similar to:

but with design updates to match the dr-ui theme.

@colleenmcginnis would love your opinion as this component is used by several other doc pages.

[colleenmcginnis]

@katydecorah I'm on board with rethinking these patterns. I just wanted to bring up that filtering the examples list was flagged as an important feature in the mapbox-gl-js docs (see mapbox/mapbox-gl-js#7530 (comment)). Do you think there's a way we could incorporate filtering into this new approach?

[katydecorah]

@colleenmcginnis great idea, we should add filtering. I cut a new ticket for that feature, though #68. I suspect that filtering could become its own module and don't want that work to block this issue.

[katydecorah]

After examining the component and finding the search functionality is already there, I think a good plan would be to follow suit by adding an option to turn off the sub items under each heading. This will allow this component to continue to be flexible in its different usages.