Sidebar intelligent responsive show/hide it when crosses the breakpoint

[sejas]

Related to:

• Make app responsive and toggle sidebar #533
• https://github.com/Automattic/dotcom-forge/issues/8986

Proposed Changes

• Show/Hide sidebar when the window size crosses the breakpoint (900px).
• Set the minimum window size to: 652 (DEFAULT_WIDTH - SIDEBAR_WIDTH + 20px of padding).
• Add/Substract only sidebar width, avoiding resizing the window dramatically.

Testing Instructions

Regular Case:

• Run npm start
• Click on the leftDrawer icon in the topbar
• Observe the app width reduces to the minimum (652px)
• Instead of clicking on the "expand" button, let's resize the window by clicking in the bottom right corner and dragging it to make it bigger
• Observe the sidebar appears
• Now resize the window to make it smaller than 900px
• Observe the sidebar disappears
• Repeat and observe everything works correctlty, the resizing and the button.

Second case:

• Now make the window bigger, the sidebar should be there.
• Click on the button to make the hide sidebar
• Resize the window, but keep the width bigger than 900px
• Observe the sidebar is hidden all the time
• Now make it smaller than 900px and increase the width.
• Observe the sidebar correctly appears.

Check this video, and let me know what you think.

4qWIWj.mp4

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[sejas]

@wojtekn , @matt-west , I think you will love this PR 😉 .

[wojtekn]

This is awesome @sejas ! 🔥

[wojtekn]

It works well on Mac and Windows.

I noticed one small thing I'm not sure about. When I make the Studio window wide, then close the sidebar, and make it narrow and wide again, the sidebar reappears.

Should we save a session flag when the user closes the sidebar deliberately so we won't show it again when they resize the window back and forth?

[sejas]

I noticed one small thing I'm not sure about. When I make the Studio window wide, then close the sidebar, and make it narrow and wide again, the sidebar reappears.

Should we save a session flag when the user closes the sidebar deliberately so we won't show it again when they resize the window back and forth?

I think it's more clear if the resize toggles the sidebar every time it crosses the breakpoint. If we disable it, it would be like having "button/feature" that sometimes doesn't work, for some reason.
If it works all the time, user can press the left drawer button again.

I'll merge this PR, but if you decide that the button should "disable/override" the resizing action, then I'll be happy to create another PR.

[wojtekn]

Makes sense @sejas , thanks for sharing your perspective.

[matt-west]

Nice work @sejas, this is super cool!

When I make the Studio window wide, then close the sidebar, and make it narrow and wide again, the sidebar reappears.
Should we save a session flag when the user closes the sidebar deliberately so we won't show it again when they resize the window back and forth?

I agree with @wojtekn here. We should remember if the user previously closed the sidebar and not re-open it automatically when they resize the window. This is consistent with the behaviour of Apple apps like Notes.

Screen.Recording.2024-09-16.at.14.33.08.mov

[sentry]

Suspect Issues

This pull request was deployed and Sentry observed the following issues:

• ‼️ Error: Failed to delete local files <anonymous>(renderer/main_window/studio/./src/h... View Issue

_{Did you find this useful? React with a 👍 or 👎}