Skip to content

Conversation

@lungarella-raffaele
Copy link
Contributor

Fixes part of #1162
This addresses a sidebar state management issue where the scrollbar behavior and sidebar state aren't properly coordinated.

I think the intended behavior should be:

  • Desktop/tablet: sidebar always open, page scrollbar visible
  • Mobile: sidebar toggles open/closed, scrollbar locked when sidebar is open

However, the current implementation has some issues:

  1. On page render, isSidebarOpen flashes from true to false even when the sidebar is clearly visible
  2. Clicking the sidebar toggle affects both scrollLock and isSidebarOpen on all screen sizes, even though this behavior should only apply to mobile (I think)
  3. The sidebar state issues aren't immediately obvious because CSS media queries independently control sidebar visibility, hiding the underlying state management problems

I've updated the logic so that sidebar state management primarily matters on mobile, with the sidebar defaulting to open on larger screens, but I had to add an hook to check if we are on mobile with an hardcoded breakpoint

This makes the docs more usable, but I'd love feedback on how to improve it! 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant