feat(sidebar): Mobile transition tweaks #873
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Transition on mobile
Prior to the sidebar refresh in #798, the sidebar was revealed without transition on mobile devices. In #798 we repositioned the sidebar so that it takes up the entire layout on small screens, using the same transition logic.
An artifact of the previous design was that sidebar content could cause layout shift during transition, because it could affect the size of the parent container. To address that, we hid the sidebar contents until the transition finishes.
Layout shift isn't a problem on mobile, so it wasn't necessary to update the styles to hide the content. But this makes the transition inconsistent between mobile and desktop, so this PR now hides the content for all sidebars during transition.
Toggle position on mobile
On mobile or small screens, the sidebar takes up the entire layout container. Depending on the screen size and app layout, this means the sidebar can expand to the entire screen width, taking the toggle with it to the opposite side of the screen.
This PR keeps the toggle on the sidebar's collapsed side on small screens, minimizing mouse or finger travel to open and close the sidebar. This makes use of the dedicated toggle space at the top of the layout container, so it works well for nested sidebars.
Example
You can see both changes in the video below.
Kapture.2023-10-28.at.07.49.41.mp4