Create tabbed sidebar

[camray]

Overview

A project that I've been working on requires a customizable view to be added to Graphiql. We decided that the best way to handle this would be to add tabs to the sidebar where Docs currently are. I've already made all the necessary changes to the project as an MVP and we've been using a forked NPM package internally but I wanted to offer the changes to the community as a proposal. If the maintainers believe it would be a useful addition I can begin the rest of the work to make it a full blown pull request (documentation, testing, etc).

This is the forked project I've been working off of.
https://github.com/altangent/graphiql

Here is a screenshot of what the sidebar looks like

Criteria

This is the internal acceptance criteria we used in development

• Documentation panel should be open by default (unless the user has closed it)
• Existing schema documentation should now be a tab that is first in the tab list
• GraphiQL should accept a child with additional tabs, similar to how menu can be overridden (Docs should always be added as the first tab)
• The selected tab should be stored in local storage so that it is retained when the user comes back
• When the user cmd-clicks on a type in the editor, it should navigate to the Docs tab and perform the default action. This would be a regression if this functionality is not retained

Let me know what you think, if this would be worth finishing up and creating a pull request for.

[benjie]

I'm closing this in favour of #978 (comment) which is the direction of the new GraphiQL design. Please have a look over that issue and give feedback in that thread 👍