Group in sidebar is not expanded for deep nested children #1497

timaschew · 2019-03-31T15:00:38Z

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:

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.
You cannot expand two groups at the same time if they are siblings.
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)

The text was updated successfully, but these errors were encountered:

timaschew · 2019-04-13T10:18:24Z

I've fixed it, finally :) #1540

timaschew · 2019-04-13T11:54:52Z

@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 · 2019-04-14T17:30:19Z

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

ulivz · 2019-04-14T17:40:38Z

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 · 2019-04-14T18:33:08Z

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 · 2019-04-19T19:06:55Z

@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 · 2019-07-17T05:40:33Z

@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.

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 · 2019-08-04T08:31:45Z

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

shigma added the topic: theme Relates to VuePress theme label Apr 2, 2019

timaschew pushed a commit to timaschew/vuepress that referenced this issue Apr 13, 2019

Fix vuejs#1497 expanad nested sidebar items initially

6d183ff

timaschew pushed a commit to timaschew/vuepress that referenced this issue Apr 13, 2019

Fix vuejs#1497 expanad nested sidebar items initially

290142a

R9980 mentioned this issue Jun 11, 2019

[Enhancement] Extend Gridsome.org Appearance gridsome/gridsome.org#205

Open

akegaviar mentioned this issue Aug 7, 2019

Subsections do not expand when linked from a section chainstack/docs#82

Closed

timaschew mentioned this issue Sep 12, 2019

fix($theme-default): Expand nested sidebar groups #1540

Merged

15 tasks

kefranabg closed this as completed in #1540 Sep 12, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Group in sidebar is not expanded for deep nested children #1497

Group in sidebar is not expanded for deep nested children #1497

timaschew commented Mar 31, 2019 •

edited

Loading

timaschew commented Apr 13, 2019

timaschew commented Apr 13, 2019

ulivz commented Apr 14, 2019 •

edited

Loading

ulivz commented Apr 14, 2019

timaschew commented Apr 14, 2019 •

edited

Loading

timaschew commented Apr 19, 2019 •

edited

Loading

coffeephile commented Jul 17, 2019

timaschew commented Aug 4, 2019

Group in sidebar is not expanded for deep nested children #1497

Group in sidebar is not expanded for deep nested children #1497

Comments

timaschew commented Mar 31, 2019 • edited Loading

Bug report

Version

Steps to reproduce

What is expected?

What is actually happening?

Other relevant information

timaschew commented Apr 13, 2019

timaschew commented Apr 13, 2019

ulivz commented Apr 14, 2019 • edited Loading

ulivz commented Apr 14, 2019

timaschew commented Apr 14, 2019 • edited Loading

timaschew commented Apr 19, 2019 • edited Loading

coffeephile commented Jul 17, 2019

1. About nested children not being expanded

Demo

2. About expanding multiple children

timaschew commented Aug 4, 2019

timaschew commented Mar 31, 2019 •

edited

Loading

ulivz commented Apr 14, 2019 •

edited

Loading

timaschew commented Apr 14, 2019 •

edited

Loading

timaschew commented Apr 19, 2019 •

edited

Loading