Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add option sideNavLayout #2633

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

dmosberger
Copy link

I'm wondering if you'd consider adding a feature that allows making the sideNav menu more compact when there are end points sharing the same path prefix. The below is a proof of concept. It seems to work quite well with redocly preview-docs, but I'm not very familiar with Redoc so may be missing things.


Add support for theme option sideNavLayout. If set to factored, the side-nav menu will group items that share a common path prefix.

For example, if the default layout for side-nav looked like this:

	/config        >
        /config/alert  >
        /config/bacnet >
        /config/modbus >
        /log           >

Then the factored side-nav would look like this:

	/config        >
        /log           >

and after expanding /config, you'd see:

	/config        v
          GET /config
          PUT /config
          …/alert      >
          …/bacnet     >
          …/modbus     >
        /log           >

Note that this commit also updates the styling to show a vertical line to the left of all side-bar <ul> lists that are not at the root level. This probably should be configurable.

Check yourself

  • [ ✓ ] Code is linted
  • [ x ] Tested
  • [ x ] All new/updated code is covered with tests

Add support for theme option `sideNavLayout`.  If set to `factored`,
the side-nav menu will group items that share a common path prefix.

For example, if the default layout for side-nav looked like this:

	/config        >
        /config/alert  >
        /config/bacnet >
        /config/modbus >
        /log           >

Then the factored side-nav would look like this:

	/config        >
        /log           >

and after expanding /config, you'd see:

	/config        v
          GET /config
          PUT /config
          …/alert      >
          …/bacnet     >
          …/modbus     >
        /log           >

Note that this commit also updates the styling to show a vertical line
to the left of all side-bar <ul> lists that are not at the root level.
This probably should be configurable.
@dmosberger dmosberger requested a review from a team as a code owner December 19, 2024 04:39
It should be possible to collapse a parent item regardless of whether
or not it is the currently active item.  Prior to this fix, clicking
on a parent item's "fold" icon was ignored unless the item was the
currently active one.  With this fix, the parent node and its children
will be collapsed, as expected.
At the end of the loop, we need to append the remaining new children,
if there are any.
Copy link
Collaborator

@AlexVarchuk AlexVarchuk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @dmosberger, Thank you for your contribution.
Our navbar is built from tags and x-tagGroups. You can put the exact tag to each operation, and it works as you expected. If you want to do that programmatically you can use @redocly/cli and create a custom plugin to make changes. Here is an example of how to create a custom plugin.
I believe this way is more clear instead of adding a new maintainable option.

@dmosberger
Copy link
Author

Alex, thanks for your response.

It's entirely possible I'm missing something, but when I read the description here, it left me with the understanding that x-tagGroups are rendered flat. In my example, the menu would be rendered like this:

       CONFIG TAG GROUP
        /config        >
        /config/alert  >
        /config/bacnet >
        /config/modbus >
       LOG TAG GROUP
        /log           >

Also, it appears that tag groups are not collapsible and cannot be nested.

You can see a live example of the nested menu we need here. Note how when you expand the /config node, other grouped nodes appear, e.g, /config/alert, which in turn contains group /config/alert/custom.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants