Add manual expand/collapse function for app-sub-sidebar.

[vagra]

OptionA

Feature request

Add manual expand/collapse function for app-sub-sidebar.

What problem does this feature solve?

Because docsify has been doing this before:

• when loadSidebar: true, the sidebar hierarchy is:
  • sidebar as root
    • sidebar-nav for _sidebar.md
      • app-sub-sidebar for main content
• when loadSidebar: false, the sidebar hierarchy is:
  • sidebar as root
    • sidebar-nav for main content
      • does not have app-sub-sidebar

so there is no way to use a unified method to control the expand/collapse for sidebar-nav and app-sub-sidebar, when loadSidebar set to false, the items can't expand/collapse by click.

What does the proposed API look like?

1. make the app-sub-sidebar can expand/collapse by click.
2. sidebar of main content can expand/collapse always.
3. the icon of sidebar items can change display when expand/collapse.

How should this be implemented in your opinion?

1. change the sidebar hierarchy to:

• sidebar as root
  • sidebar-nav for _sidebar.md
    • app-sub-sidebar for main content

regardless of whether the loadSidebar set to false or true.

2. add manual expand/collapse function for app-sub-sidebar.

this making the tree of main content can expand/collapse always.

Are you willing to work on this yourself?

I make some changes at:
vagra@56e643a

when loadSidebar: true, look https://kepan.org/side1/

when loadSidebar: false, look https://kepan.org/side0/

if you guys like it, I can submit a PR.

[vagra]

Option B

vagra@6a1389a

this code like the Option A, but has some diffrents.

1. if you click the icon before item, can expand/collpse the children;
2. if you click the item link, can scroll to the anchor in the main content.

when loadSidebar: true, look https://kepan.org/click1/

when loadSidebar: false, look https://kepan.org/click0/

if you guys like it, I can submit a PR.

tell me you like Option A, or like Option B?

[vagra]

Keep sync scroll when some items collpsed in sidebar.

I add some changes, if some items collpsed in sidebar, keep it sync scroll.

1. click link to expand/collapse, and scroll the main content:
   total changes: https://github.com/vagra/docsify/pull/12/files
   loadSidebar=false: https://kepan.org/side0/
   loadSidebar=true: https://kepan.org/side1/

2. click arrow icon to expand/collapse, don't scroll:
   total changes: https://github.com/vagra/docsify/pull/11/files
   loadSidebar=false: https://kepan.org/click0/
   loadSidebar=true: https://kepan.org/click1/

[vagra]

I add function findParents(active), the usage is finding the parent nodes of active node, at parent class for them, then return the top level collapsed parent node.

then set active node to it, then scroll into view.

this fix the bug: if a node collapsed, when main content scroll to it's children, the sidebar jump to top.

function highlight(path) {
  ......
  parents.forEach(node => node.classList.remove('parent'));
  active = findParents(active);

  // Scroll into view
  ......
}

function findParents(active) {
  if (!active) {
    return active;
  }

  let top = active;
  let node = active.parentNode;

  while (node) {
    if (node.classList.contains('app-sub-sidebar')) {
      node = node.parentNode;
      continue;
    } else if (node.classList.contains('has-children')) {
      node.classList.add('parent');
      if (node.classList.contains('collapse')) {
        top = node;
      }
      node = node.parentNode;
      continue;
    } else {
      return top;
    }
  }
}

[vagra]

this expand/collapse function is not like #1145 , it only:

1. expand/collapse by click;
2. highlight/sync by scroll and click;
3. not auto expand/collapse when scroll.

[vagra]

Option: Plugin

I making this function as plugin, named sideplus:

total changes: https://github.com/vagra/docsify/pull/13/files

loadSidebar=false: https://kepan.org/plug0/
loadSidebar=true: https://kepan.org/plug1/

however, it is not recommended to use plugin. The minimal change solution I recommend is Option A.

because there is a problem with the current docsify: when the parent item is collapsed, the page scrolls to the anchor of its child item, sidebar will lose focus, and will jump to the top.

this makes Option A the ideal solution with minimal changes.

[knightknight]

has there been any progress on this feature?

- I found it in the plugins section.