Can be used to Multiple Sidebars by Sidebar Groups

[keiseiTi]

Feature request

What problem does this feature solve?

What does the proposed API look like?

How should this be implemented in your opinion?

Are you willing to work on this yourself?

i can pr

[timaschew]

You didn't use the template correct, at least you didn't fill in all the questions.
Please don't use images instead of text, use a code block if you want to show some code.

It's really not clear what you want to do.
Maybe it's already working what you want to do. I've created a demo here: https://hungry-yonath-bfd0a1.netlify.com/

[keiseiTi]

sorry , I don't do correct. Now I rewrite it.

Feature request

What problem does this feature solve?

The Sidebar Groups API can be used for Multiple Sidebars.

What does the proposed API look like?

module.exports = {
  themeConfig: {
    sidebar: {
      '/archives/': [
        {
          title: 'Group 1',   // required
          collapsable: false, // optional, defaults to true
          sidebarDepth: 1,    // optional, defaults to 1
          children: [
            'hello-world'
          ]
        },
      ]
    }
  }
}

How should this be implemented in your opinion?

modify method resolveSidebarItems of vuepress/packages/@vuepress/theme-default/util/index.js

[timaschew]

This works already.

[kaceo]

I think the sidebar is not an API, rather it is a configuration that is passed to the Theme. If you are using the default theme it already supports single and multiple sidebars, https://v1.vuepress.vuejs.org/theme/default-theme-config.html#sidebar-groups . If you need a different type of sidebar treatment, it can be achieved by creating a new theme, or overriding the Sidebar component. The documentation for v1 is quite messy but architecturally sidebar's behaviour is defined in the current theme and not in core.

[vrjuliao]

Vuepress default theme support multiple nested sidebar groups. In .vuepress/config.js, you can to create themeConfig with:

sidebar: [
    {
        type : 'group',
        title: '1',
        collapsable: true,
        children: [
            {
                type: 'group',
                title: '1.1',
                collapsable: true,
                children: [
                        ['/', '1.1.1']
                ]
            }
        ]
    }
]

For produce:

[alicefm]

I can't get multiple sidebars to work.

In the example below, feat1 always falls back to what's defined in fallback.

main, feat2 and feat3 are ok though - they display child docs correctly.

When I go back to feat1 from feat2 or feat3, I get the last used sidebar.

Am I missing something?

 sidebar: {
  '/main/': [
    '',
    'topA'
  ],

  '/feat1/': [
    '',
    'top1',
    'top2'
  ],

 '/feat2/': [
    '',
    'top3',
    'top4'
  ],

 '/feat3/': [
    '',
    'top5'
  ],

  // fallback
  '/': [
    ''
  ]
}

folder structure:

. (docs) ├─ README.md ├─ main/ │ ├─ README.md │ └─ topA.md ├─ feat1/ │ ├─ README.md │ ├─ top1.md │ └─ top2.md ├─ feat2/ │ ├─ README.md │ ├─ top3.md │ └─ top4.md └─ feat3/ ├─ README.md └─ top5.md