Group in sidebar is not expanded for deep nested children

[timaschew]

• I confirm that this is an issue rather than a question.

Bug report

Group in sidebar is not expanded for deep nested children.

Version

1.0.0-alpha.44

Steps to reproduce

Open this page: https://hungry-yonath-bfd0a1.netlify.com/frameworks/non-jsx/vue.js.html

The group (Frameworks) in the sidebar is not expanded. You need to expand the first group manually. The second group (non-JSX) is already (correctly) expanded.

repro repo: https://github.com/timaschew/vuepress-nested-sidebar-demo

What is expected?

• Frameworks is expanded and
• non-JSX is expanded and
• the page Vue.js is active/highlighted

What is actually happening?

Frameworks is NOT expanded

Other relevant information

• Your OS: macOS
• Node.js version: 11.11
• Browser version: Chrome 72
• Is this a global or local install? Local
• Which package manager did you use for the install? npm
• Does this issue occur when all plugins are disabled? yes

I tried to fix the SidebarLinks.vue component by changing this code block:

for (let i = 0; i < items.length; i++) {
    const item = items[i]
    if (item.type === 'group' && item.children.some(c => c.type === 'page' && isActive(route, c.path))) {
      return i
    }
  }

with a flatten array of all nested children, but it didn't work.
Also I tried to trigger toggleGroup within created () if it matches any nested children for the active route but that has affected the wrong group, it was the inner/second group which was then also collapsed.

So please give me a hint then I can provide a PR.

---

Related documentation:

I didn't saw this documented anywhere, but I just suggest to mention this explicitly in the docs to avoid surprising effects:

1. If a group is expanded by clicking then every first child (up to the deepest level) is expanded automatically. All other siblings are not expanded.
2. You cannot expand two groups at the same time if they are siblings.
3. If you expand a path of nested groups which are just titles (don't are links) but you don't click on any link at the end within the path and then collapsing the top group and expanding it again the expanded state will be discarded. Except you've expanded a path which contains always the first child (see no.1)

[timaschew]

I've fixed it, finally :) #1540

[timaschew]

@shigma
Given a page A is currently active and you have a nested sidebar structure like this: X -> Y -> Z and Z is a page.

Is it expected if you expand X manually you will see Y already expanded including Z?
If you have lot of items next (siblings) to Y and Z this is a bit annoying, because you don't see them all, because the first nested group is always expanded.

Since it's not documented anywhere I don't know if this is a bug or expected.
I have a fix/feature for this.

[ulivz]

I cannot reproduce at your repro. Did you update it?

[ulivz]

The group (Frameworks) in the sidebar is not expanded. You need to expand the first group manually.

Isn't this the default behavior of a sidebar group?

[timaschew]

I cannot reproduce at your repro. Did you update it?

I've updated the site but the bug should still be visible.

If I open this page: frameworks/non-jsx/vue.js.html I'm expecting to see expanded sidebar for the currently active page. So both Frameworks and non-JSX should be expanded. But Frameworks is collapsed.

Isn't this the default behavior of a sidebar group?

No, this is not consistent with a non nested sidebar. If there would be no Frameworks group, just non-JSX at top level it would be expanded. And even if that would be not the case, as a user I need to know where the currently active page is located in the sidebar. If the sidebar is collapsed I have no chance to find that out.

[timaschew]

@ulivz let me try to explain with an updated version of this website

Initial State	Action	Actual Behavior	Expected Behevior	Notes
Open Demo page	click on D	D is selected in the sidebar and navbar	same as actual	Ok
previous	in the pagination section: click on C-2	C is expanded and C-2 is selected in the sidebar. C-2 in the navbar is only visible on mouse over.	C in the navbar is selected as well (w/ and w/o mouseover)	Bug 1
previous	in the pagination section: click on C-1 and then on B-B-B-2	just the page is shown	- sidebar is expanded - entry in the sidebar is selected (it's selected, but you see it only when if expand it manually) ------------------------- - B is selected in the navbar	Bug 2 ----- Bug 1
Landing page (Demo) is opened	in the sidebar: click on A	this is expanded: - A - A-A (which means all children of A-A are visible)	A-A should not be expanded, just A	Bug 3

Bug 1: I have locally fixed it but it's a dirty hack using a router hook and pure DOM manipulation because I didn't find out where to fix it in VuePress

Bug 2: sidebar not expanded active nested items: here is the fix #1540

Bug 3: I have a fix for this as well. Please verify that this is a bug and I will submit my PR

[coffeephile]

@timaschew Thank you for addressing this issue!

1. About nested children not being expanded

I ran into the same problem.

Before noticing your pull request I was already working on a solution myself.
I do not want to create a conflicting pull request because my solution basically does the same thing as yours, however as my code is a bit more compact please allow me to share it here.

Code: coffeephile@6b3bd66

Demo

• Problem (sidebar not expanded):
  https://vuepress-fix-demo.herokuapp.com/sidebar-problem/docs/subsec/subsubsec/
• Fix (sidebar expanded properly):
  https://vuepress-fix-demo.herokuapp.com/sidebar-fix/docs/subsec/subsubsec/

---

2. About expanding multiple children

Furthermore, I have implemented a fix regarding this issue you pointed out.

2. You cannot expand two groups at the same time if they are siblings.

Code: coffeephile@2303256

Demo (please try expanding both 'Introduction' and 'Documents'):
https://vuepress-fix-demo.herokuapp.com/sidebar-fix/

I am not sure if this behavior is desired, but I personally prefer being able to expand multiple children, so I am considering issuing a pull request for this issue.

[timaschew]

Nice, and yes your code looks better ;)

I am not sure if this behavior is desired, but I personally prefer being able to expand multiple children, so I am considering issuing a pull request for this issue.

Yes I totally agree. But that can be a configuration, right? So everybody can use its own preferences.

I hope the bugs will be fixed soon. I actually expected that they will be fixed before 1.0 will go live, but 1.0 is already out.

\c @ulivz @shigma