feat($theme-default): refine sidebar groups

[ulivz]

Summary

This PR contains following features:

1. sidebarDepth for a specified sidebar group;

module.exports = {
  themeConfig: {
    sidebarDepth: 1, /* Default sidebar depth */
    sidebar: [
      {
        title: 'foo',
        sidebarDepth: 2,  /* Override default sidebar depth for current sidebar */
        children: [
          ['', 'README'],
          'a',
          'b',
          'c',
          'd'
        ]
      }
    ]
  }
}

e.g.

• Change:

• Before | After

2. Nested sidebar groups;

module.exports = {
  themeConfig: {
    sidebar: [
      {
        title: 'foo',
        children: [
          ['', 'README'],
          'a',
          'b',
          {
            title: 'foo/child',
            children: [
              'c',
              'd'
            ]
          }
        ]
      }
    ]
  }
}

3. Clickable heading for sidebar groups.

module.exports = {
  themeConfig: {
    sidebar: [
      {
        title: 'foo',
        path: '/foo/', /* Sidebar of current heading will be clickable like a route link */
        children: [
          ['', 'README'],
          'a',
          'b',
        ]
      }
    ]
  }
}

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Docs
• Build-related changes
• Other, please describe:

If changing the UI of default theme, please provide the before/after screenshot:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

You have tested in the following browsers: (Providing a detailed version will be better.)

• Chrome
• Firefox
• Safari
• Edge
• IE

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature
• Related documents have been updated
• Related tests have been updated

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

Other information:

[ulivz]

cc @zyy7259

[davestewart]

Great! Much clearer than #669

[sirien-neiris]

Hi. Question, if I may.

It seems that this only allows creating "higher order" collapsing items in the menu (= there are source files, every source file is its own collapsible item in the menu, this allows to create one higher order collapsible item under which will cover this "standard level" items)

Is there a way how to make LOWER items in the menu collapsible? (= to make every lower-level heading inside source files collapsible as well)

We would really need this option, but it seems VuePress currently doesn't allow that :(

[lunaceee]

Can I ask how the folder structure looks like for this?

module.exports = {
  themeConfig: {
    sidebar: [
      {
        title: 'foo',
        children: [
          ['', 'README'],
          'a',
          'b',
          {
            title: 'foo/child',
            children: [
              'c',
              'd'
            ]
          }
        ]
      }
    ]
  }
}

What i'm trying to achieve:

Topic Group 1
- Page 1A
    - Sub-page 1A-a
    - Sub-page 1A-b
- Page 1B
- Page 1C
    - Subpage 1C-a

Topic Group 2
- Page 2A
- Page 2B
    - Sub-page 2B-a
    - Sub-page 2B-b
- Page 2C

Sub-page is also a page instead of heading, it seems that this feature is shipped in. I tried creating nested folders but ran into this error in the console [vuepress] Nested sidebar groups are not supported. Consider using navbar + categories instead.

Thanks!