-
-
Notifications
You must be signed in to change notification settings - Fork 8.3k
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(theme-classic): auto-collapse sibling categories in doc sidebar #3811
feat(theme-classic): auto-collapse sibling categories in doc sidebar #3811
Conversation
✔️ [V2] 🔨 Explore the source changes: 976dd19 🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/61d9550b6b03490008a4c7f0 😎 Browse the preview: https://deploy-preview-3811--docusaurus-2.netlify.app |
packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
Outdated
Show resolved
Hide resolved
Thanks, that looks like a useful new feature to add! I'd rather not enable this by default without polling the community about that first. Also, not totally fan of the mutations being done in the implementation. The collapsed state is currently in the category. If you want a category to collapse, it would be better to make sure that I see 2 possible solutions:
Also the close animation seems to not work as reliably as before |
@slorber I'd love this feature, what is the current blocker? |
@rylandg the problem is written in the comment just before: #3811 (comment) If you are able to get it working with:
If you are unable to get it working, I'll figure it out myself and merge it, but I'm still busy working on i18n and have no time to work on it in the short term. |
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-3811--docusaurus-2.netlify.app/ |
Size Change: +13 B (0%) Total Size: 155 kB ℹ️ View Unchanged
|
This comment has been minimized.
This comment has been minimized.
hey @slorber ! I have implemented 2/3 of the changes you required before it gets push but wanted to get you opinion on making the animation to correctly work, I brought all the state up so now the all the collapsing happens at the same time which I think changes how the animation worked since it waited Thank you! |
just checking the status of this pull request @slorber thank you! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @josephriosIO , thanks for your work on this
There are a few things that do not look good to me:
- A map with labels as index is not a reliable solution to store the categories states (it does not look simple as we don't have any unique category id, and probably need some kind of recursive structure)
- The current UX looks weird to me (I guess it's quite subjective, maybe ask for feedbacks of your colleagues at Temporal about what they think about keeping the active category unfolded?)
For the animation, I didn't implement it and not 100% sure why the timeout was needed in the first place. I guess it could be restored by using a useEffect()
somewhere, or maybe const isCollapsedDebounced = useDebounce(isCollapsed,100)
?
Also, it'd be nice to update your PR and solve the conflicts with master
Let me know if you need any help (I can commit to your PR, that may be faster for me than writing down my ideas as comments)
packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
Outdated
Show resolved
Hide resolved
@slorber I think this is good enough? Our sidebar is too complicated, just used even more hooks inside ㄟ(▔,▔)ㄏ Context providers aren't the cleanest solution IMO, since we don't pass this to deep children... But so far it seems it works |
@@ -111,6 +114,28 @@ function DocSidebarItemCategory({ | |||
}); | |||
|
|||
useAutoExpandActiveCategory({isActive, collapsed, setCollapsed}); | |||
const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState(); | |||
function updateCollapsed(toCollapsed: boolean = !collapsed) { | |||
setExpandedItem(toCollapsed ? null : index); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The only case we have to think twice about UX is when there are multiple sidebar categories expanded by default. In this implementation, the expandedItem
context is initialized to null
, and when the user collapses one of those default-expanded categories, the others remain expanded until any category is toggled to be expanded.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I’m excited this feature is finally getting some steam
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes! This is the UX I've been looking forward to, so I did invest some time in this :D
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I haven’t really looked at the code, just a quick glance but I would set the default setting to false, I know not everyone will want this feature on by default, and that was an issue when I first tried to get this in over a year ago 😂
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, it's indeed defaulted to false :) Just that it would be cool to be turned on for our website.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Alright, that's not the ideal implementation, but that seems good enough for now, so let's move on
The only case we have to think twice about UX is when there are multiple sidebar categories expanded by default. In this implementation, the expandedItem context is initialized to null, and when the user collapses one of those default-expanded categories, the others remain expanded until any category is toggled to be expanded.
That's true there are a few unhandled edge cases, but most users will likely not notice them.
We'll refactor this feature and make it more robust later.
Let's enable it on our own website for now to dogfood
But I'm very likely to turn this off later because for me it is a real pain to click on a category see it shift far away from your mouse cursor.
Motivation
As a user having multiple opened categories in the sidebar, it got confusing and cluttered having that everything open on the left side of the screen.
Have you read the Contributing Guidelines on pull requests?
Yes
Test Plan
Using the enabled
themeConfig.autoCollapseSidebar
option, you can make the sidebar only have one parent category open at a time, helping users not get cluttered and only focus on the content they selected. This is enabled by default, If you want them to be always opened, setthemeConfig.autoCollapseSidebar
tofalse
:Preview
Related PRs
(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)