stoplightio / elements

Build beautiful, interactive API Docs with embeddable React or Web Components, powered by OpenAPI and Markdown.
https://stoplight.io/open-source/elements/
Apache License 2.0
1.83k stars 207 forks source link

Add option to show nav items as collapsed by default #1682

Open steve-nay-sage opened 3 years ago

steve-nay-sage commented 3 years ago

User story.

As a technical writer for a large API that is actually comprised of many APIs, I'd like to see nav items collapsed when Elements loads instead of expanded, so that the table of contents is more scannable and not so overwhelming

Describe the solution you'd like

A nav today might look like this:

image

As you can see, you can't see the APIs that are farther down in the nav. With this optional setting changed to "collapsed" the nav would look like this:

image

The API that I work with has many more groups and APIs than are shown here, so the problem with everything expanded by default is much worse.

There could be two configuration settings, one that controls whether nav items are expanded/collapsed by default and the other for nav groups.

mpodlasin commented 3 years ago

Actually ToC already has a prop for controlling what is shown on initial render - https://github.com/stoplightio/elements/blob/main/packages/elements-core/src/components/MosaicTableOfContents/TableOfContents.tsx#L29 - it's called maxDepthOpenByDefault - it just has to be utilised in API and StoplightProject components.