Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(v2): make sidebar collapsible #1817

Merged
merged 3 commits into from
Oct 9, 2019
Merged

Conversation

yangshun
Copy link
Contributor

@yangshun yangshun commented Oct 9, 2019

Motivation

For docs with a long menu (like Docusaurus and CRA), collapsing the sidebars by default will be more helpful. Thanks to the awesome sidebar metadata refactoring by @endiliey, this is now possible.

Features:

  • Highlight the recursive parent categories of the current menu item
  • When you navigate to a page where the parent category is currently collapsed, that category will open up (I think there is still some buggy behavior but this is good enough for now).

I also removed displaying a smaller + different color link on the level 3, I think we don't need that differentiation now that we have the chevron.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Screen Shot 2019-10-09 at 12 41 06 AM

Load the Netlify preview and click around!

Related PRs

#1815

@yangshun yangshun requested a review from endiliey as a code owner October 9, 2019 07:47
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Oct 9, 2019
@docusaurus-bot
Copy link
Contributor

docusaurus-bot commented Oct 9, 2019

Deploy preview for docusaurus-2 ready!

Built with commit e975f38

https://deploy-preview-1817--docusaurus-2.netlify.com

@docusaurus-bot
Copy link
Contributor

docusaurus-bot commented Oct 9, 2019

Deploy preview for docusaurus-preview ready!

Built with commit e975f38

https://deploy-preview-1817--docusaurus-preview.netlify.com

Copy link
Contributor

@endiliey endiliey left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For some host like netlify, the first page load appends a trailing slash at the end / which causes some weird behavior.

For example, when we go to https://deploy-preview-1817--docusaurus-2.netlify.com/docs/introduction and then click on another category sidebar link, you can notice that it still highlight the inactive category.
before-patch

Anyway, I've patched the PR a bit. Should be fine now,
after-patch

@endiliey endiliey requested review from wgao19 and endiliey October 9, 2019 11:22
@endiliey
Copy link
Contributor

endiliey commented Oct 9, 2019

Need update changelog

@yangshun
Copy link
Contributor Author

yangshun commented Oct 9, 2019

Thanks for helping to fix the issue! I simplified the code a bit to remove the trailing slash regardless.

@yangshun yangshun merged commit 17252a0 into master Oct 9, 2019
@yangshun yangshun deleted the yangshun/collapsible-sidebar branch October 9, 2019 15:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants