feat(theme): enable 2nd level sidebar collapse (#1360)

[kiaking]

close #1360
close #1361
close #1680

Enable 2nd level collapsable group in sidebar menu.

It restricts the nesting level to 2. Because I don't think it's realistic to have infinite nesting. If we want to go 3rd level, we should consider other approaches in my opinion, like:

• Show dialog on right side of the item on hover.
• Make slide animation and make switch menu group entirely.
• etc.

For nesting purpose, I think this should be fine 👀

---

Todos

• Update docs.

---

[LittleSound]

I think 2 levels of nesting doesn't solve my problem in my use case (#1360, #1361). So is it still possible to support multiple layers of nesting? If not, is there a way for users to implement multi-layer nesting themselves via slots, configs, or other viable ways?

[nekomeowww]

It restricts the nesting level to 2. Because I don't think it's realistic to have infinite nesting.

I agree that it's not realistic to have infinite nesting. However, I think such limit should not be restricted by framework / generator from documents.

As for documentation sites, technical support sites that use VitePress, I agreed to restrict the limit to 2 may provide a better experience for browsing users to easily find out the content they want. But, what about the other users of ReadWise, LogSeq and Obsidian? As one of the users use the tools I have mentioned, I don't think it's enough for us to organise and categorise our content with just 2 levels.

Could you provide the other ways to achieve such requirements? Such as making 2 level limits as the default and providing a configuration option to allow the users to decide whether or not to overcome the limits. If it is impossible to have such configurations, could you please provide a new slot to replace the entire sidebar for users?

If we want to go 3rd level, we should consider other approaches in my opinion...

I am not quite understand your opinions. What is the purpose of showing a dialog when hovering? And what kind of the slide animation? Is it like to slide the entire sidebar upwards and replace the sidebar with the new groups of levels deeper?

[LemonNekoGH]

It restricts the nesting level to 2. Because I don't think it's realistic to have infinite nesting.

i think vitepress is just a tool, should not limit user's behaviour

[kiaking]

Well, I understand you guys frustration, but this is the restriction of the "theme", not VitePress core. If we allow to have more level of nesting, for each nest level, we need to have good UI design otherwise it's meaningless to have such an option.

You do realize that this is themeConfig options right...? So if you're building a custom theme, all option under themeConfig have no affect at all. It's up to users to do what ever they want with the option.

Could you provide the other ways to achieve such requirements?

Build your own theme 👀 Then, this option have no effect on your theme. You define your own settings. For example, Vue.js site is using VitePress, but it has its own themeConfig.

So, as I mentioned in this PR. If we want the 3rd level and further nesting, we need to come up with the UI for that. If anybody has a cool idea on how that might look right, we could consider it.

However, also remember that VitePress default theme is focused on Docs site. And I think as a best practice, I don't think even having 2nd level nesting is a good idea.

Look at Laravel, Tailwind CSS, even GitHub. They don't even have 2nd level nesting.

Now GitHub doc had a 2nd level nesting but with entire Sidebar menu switch, not infinite indention. This might be cool, but you know what I mean right? It's not nested in the way you guys are describing.

[nekomeowww]

You do realize that this is themeConfig options right...? So if you're building a custom theme, all option under themeConfig have no affect at all. It's up to users to do what ever they want with the option.

Yes, I do. However, this is not the point of what I am questioning about. I surely understand that themeConfig is bind to the theme. I was asking to provide way to configure the depth to iterate inside the component via configs / options.

Build your own theme 👀 Then, this option have no effect on your theme.

I understand that we can build our theme to match our expectation as much as possible, but still, I do think it is important that the official theme could provide a flexible and extendable theme as well, especially when the multi-level of collapsable nesting documents feature is a common feature many users wanted. Handling such tasks to community may cause many other problems and gaps to users, such as out-dated (compares to official theme), branching diversity, etc.

However, also remember that VitePress default theme is focused on Docs site. And I think as a best practice, I don't think even having 2nd level nesting is a good idea.

I have seen many of the documentation sites use more than 3 levels of nesting to organize their contents, such as Microsoft (Link 1, Link 2), Postgres (they used multiple pages to improve the UX), MongoDB, K8S, Docker, AWS, Lua, ClickHouse, Jira, even GraphQL. And best practice never meant to be something to force the users or projects to follow strictly.

I also found out that many of the 2 levels of nesting documentation site will allow the top hierarchy level to be a clickable link where VitePress can't.

[kiaking]

Please provide good UI design with more than 3 level nesting that matches the theme for this VitePress default theme. Then, I'll consider. Otherwise. Sorry it's not happening.

[nekomeowww]

Please provide good UI design with more than 3 level nesting that matches the them for this VitePress. Then, I'll consider. Otherwise. Sorry it's not happening.

I will try to provide one ASAP. What are the problems and edge cases should I consider while design since you have your concerns?

Just saw @LittleSound mentioned the breaking change above, I think it is partially ok if the default theme of VitePress only support 2 levels of collapsable UI, however, why removing the current supported infinite nesting?

[kiaking]

I will try to provide one ASAP. What are the problems and edge cases should I consider while design since you have your concerns?

Should we have deeper indent? What happens when we have too many indent where there's space for only 2 characters? Should font size be smaller? Color should be the same? Should we have border on left? Should we have the same icon for carte? etc.

[nekomeowww]

I went to research the nice UI/UX examples in depth. I discovered the point of contradiction I need to ask about first.

Wikipedia (example link), they just launched the new version which contains a sidebar feature on the left side.

While Wikipedia generate the outline sidebar from the header title of the page, VitePress does the same thing, the only difference is Wikipedia placed the outline sidebar on the left, and VitePress placed it on the right. However, I realized the outline sidebar that VitePress generates would allow 6 levels (because HTML / Markdown allow 6 levels of header titles), it has indent all the way to the most deep level, it replaced the words that exceeds the container when there is no spaces left, the font styles are the same, it worked really well in the cases I could imagine and the cases you mentioned. Then, I was wondering, could you please consider to reuse the design of the outline with the plus sign and minus sign actions to collapse and expand? If not, I would question whether the outline module violates your current UI design concepts.

I've also checked the tools you guys use, such as Netlify (example link), they have way more levels of nesting than I would expected.

There are way many documentation sites, blog sites, technical sites and wiki sites I have looked up, there is no UI/UX designs of these sites take cared about the differences of levels. And I also looked up the designs of VuePress, and VitePress, none of you guys clearly make the differences of levels in deeper header titles of page contents or levels of outline sidebar. What makes it so important to clearly show the differences of levels?

Section conclusion:

I suggest alter the levels of nesting limits to 6 levels at least (or 5 levels since outline design won't include the top level of header title), and use the same design as outline sidebar.

[kiaking]

I've opened new PR with 6 level deep nesting feature added. Now, what would you say 🤔
#1835