Implement side nav grouping of components

[johno]

Implement side nav grouping of components

[johno]

Toying around with potential APIs:

Props

Prop based with category and categories, the latter accepting an array to place an example in multiple nav sections.

<Example name="Button" category="Elements">
  <Button>Hello, world!</Button>
</Example>

Composition

A Section/Category component:

<Section name="Elements">
  <Example name="Button">
    <Button>Hello, world!</Button>
  </Example>
</Section>

Thoughts

Right now I'm leaning more towards the composition approach. Especially since this lends itself to being more extensible down the road. For example, being able to filter the Library based on Section name or being able to have multiple levels of Sections in a nav.

[jxnblk]

For the first example, I’d imagine allowing an api with a categories prop where multiple keywords could be passed in for tagging.

The first example would mean not having to recursively find children, and with the second, I assume we might want to allow nested sections.

Thinking about this maybe support for both in some capacity might make sense? People do love to create categories