add manual/auto expand/collapse function to sub-sidebar.

[vagra]

Summary

closes #1135

1.using '.sidebar' for main sidebar, using '.app-sub-sidebar' for docs sidebar.
2.add '+/-' sign before link.
3.when you click at '+/-' button, you can expand/collapse the item.
4.when you click the link, the main page sync scroll and heighlight.
5.when you scroll the main page, the '.app-sub-sidebar' sync scroll and auto expand/collapse.

temp demo site:
https://kepan.org/alpha/#/kepan/
(this is a temp link, will be closed in the future)

https://kepan.org/docsify/
this is using modify version of docsify, support for up to 108 levels heading.

If you feel good, you can merge my code to your project.

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:

---

• DO NOT include files inside lib directory.

[anikethsaha]

can you rebase with develop

also, change the icons to something like this.

check docusaurus for ref

also, confirm if the below scenario is working or not.

1. click on any sub-sidebar link
2. reload the page (F5)
3. scroll and check the sidebar highlighter is working or not.

(sorry, I have some time issue otherwise I would have tested it by myself. cc @docsifyjs/reviewers , can you guys check this as well.)

[vagra]

ok.

I already rebase to upstream/develop, and test the step 1.2.3 all fine.

I updated the demo site:
https://kepan.org/alpha/#/kepan/

I change the icons before sidebar item to:

if a node does not have children, it does not show icon;
if a node have children, it show '›' when close, and '-' when open.

but I can't move the icons to the right of item, because:
at the left of item, user can click the icon, let item open or close;
if the icon at the right of item, user can't click it, because the item is a full link block.

[sy-records]

I think this feature can be turned on as a configuration, rather than by default.

[vagra]

yes, the purpose of my code is mainly for docs with more than 3 levels of TOC, so you can keep this code as an idea, without merging it.

[Koooooo-7]

If possible, I hope you can make it to be plugin.:rocket:

[trusktr]

This would be a nice feature to have! Let's make sure that it won't close the menu when clicking on the toggle. For that, please see #1175

We should update that to also check for the toggle using the class name.

Cc @sy-records

[trusktr]

See other comment. For me on mobile it closes the menu.

[vagra]

@trusktr very good.

the next step I want to do, when user open sidebar in mobile, click '+/-' can expand/collapse items, but will not close the sidebar. close the sidebar only when user click the link.

[anikethsaha]

If possible, I hope you can make it to be plugin.🚀

I think having this as plugin might be good cause already we overshoot the size limit and not really in favor of adding more feature/enhancement.

thoughts ?

[vagra]

I think having this as plugin might be good cause already we overshoot the size limit and not really in favor of adding more feature/enhancement.

I'll try it later.

[anikethsaha]

I think having this as plugin might be good cause already we overshoot the size limit and not really in favor of adding more feature/enhancement.

I'll try it later.

Thanks a lot @vagra . Feel free to add a link to awesome-docsify repo.

[trusktr]

In general I think the open/close feature of the menu items leaves something to be desired. For example, non-link items currently stay always open with no option to close.

I wonder if we can make a recursive pure-CSS open/close that works with any level, link or not.

I think it is fine for a feature like this to be a plug-in. We can feature it in the plugin section of the docs.

[trusktr]

New issue for the idea of re-doing the side-bar with built-in pure CSS collapsible tree: #1180

Let's take some ideas from here and continue to chat there.

@anikethsaha I think we should aim to make everything a plug-in as much as possible. 👍

[anikethsaha]

yes we should aim that ... thats one of the big benefits of having plugin system