Make app responsive and toggle sidebar

[sejas]

• Closes https://github.com/Automattic/dotcom-forge/issues/8986

Proposed Changes

• Create a new top bar
• Move Authentication buttons to that top bar
• Move offline indicator to the TopBar
• Add a new button to toggle the sidebar
• Fix tests (I'll move the topbar tests to its own file)

Testing Instructions

• Run npm start
• Observe a new top bar
• Click in the first icon
• Observe the app reduces its size and the sidebar disappears
• Change tabs and observe the UI doesn't break.
• Click again on the leftDrawer icon in the topbar and observe the app displays the sidebar and the window restores it's previous size.
• If possible test in Mac and Windows.

Mac

responsive-studio.mp4

Windows

q4uVLd.mp4

Offline indicator

Pre-merge Checklist

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

[sejas]

@wojtekn , are you ok merging this? or would you prefer to add it behind a feature flag?

In my opinion the responsive is an independent feature from the Assistant, the same way the float on top is already released.

[matt-west]

Nice work @sejas! I was only able to test it on Mac, but spotted a few minor things.

---

Is it possible to centre the icons in the top bar with the window controls?

Can you increase the height of the user element in the top bar to 24px so it matches the height of the help icon when hovered.

The user avatar and help icon should be closer together. The avatar is also missing the white outline.

Current	Design

When the offline icon is displayed, the header bar gets taller.

Screen.Recording.2024-09-13.at.14.35.38.mov

Is it possible to automatically collapse the sidebar if the user tries to resize the window below the min-width? (Totally fine to tackle this in a separate PR if needed.)

Screen.Recording.2024-09-13.at.14.46.20.mov

[wojtekn]

I've tested it on macOS. Looks great! I noticed some issues:

• layout shift between authenticated and logged-out state (mentioned by Matt above, too)
• The Import / Export tab got a scrollbar as we reduced window height. Could we slightly reduce the import box height to avoid that? @matt-west
• when I have wide Studio window, and I hide the scrollbar, it hides the scrollbar but uses the minimum width. I expect it will use the previous width with the subtracted sidebar width

I will test it on Windows soon.

In my opinion the responsive is an independent feature from the Assistant, the same way the float on top is already released.

It makes sense. Let's release it for all users.

[matt-west]

The Import / Export tab got a scrollbar as we reduced window height. Could we slightly reduce the import box height to avoid that?

Yep. Reducing the height to h-36 should fix the scrolling issue.

[wojtekn]

It works well on Windows, with the following issues:

• minimum window width is used when I hide the scrollbar, regardless of my window width, similarly to macOS behavior
• when I hide the scrollbar, it is hidden smoothly with animation, but the window size changes rapidly. On macOS, it works smoothly, too. If it's not quick fix, we could fix this as a follow-up, though.

User logged in:

Use logged out:

Sidebar hidden:

[sejas]

@wojtekn , @matt-west , thanks for reviewing the PR. I've fixed everything you mentioned.

when I have wide Studio window, and I hide the scrollbar, it hides the scrollbar but uses the minimum width. I expect it will use the previous width with the subtracted sidebar width

I've implemented the memory size for both states, with and without sidebar, but this behaviour can conflict if/when we implement the window manual resizing:

Is it possible to automatically collapse the sidebar if the user tries to resize the window below the min-width? (Totally fine to tackle this in a separate PR if needed.)

We could need a bit of discussion about making the window responsive by resizing it. It's possible, and it makes sense to me. But it seems incompatible combined with saving the previous width.
My understanding of the manual resizing is that when a user makes the window smaller than the "minimum" size, the sidebar will disappear and when the user makes it bigger than the minimum size, then the sidebar will appear automatically. But what should happen when the user clicks on the button?. I think in that case we shouldn't save any previous width and just use the smallest width possible for each state.

I'll merge this PR and if we find new bugs or enhancements, we can open new PRs/issues. Thank you!

[sejas]

@wojtekn , @matt-west , in fact Wojtek's suggestion was simpler and it's totally compatible to automatically displaying/hiding the sidebar on window resize. Check the PR below.

when I have wide Studio window, and I hide the scrollbar, it hides the scrollbar but uses the minimum width. I expect it will use the previous width with the subtracted sidebar width

I misunderstood this explanation thinking to keep the size memory, but you actually were suggesting a simpler workflow. 👌

I've created a PR applying your approach and Matt's suggestion.

Is it possible to automatically collapse the sidebar if the user tries to resize the window below the min-width? (Totally fine to tackle this in a separate PR if needed.)

Done! 🥳 Let me know what you think:

• Sidebar intelligent responsive show/hide it when crosses the breakpoint #536 😚 👌