[58454] Sidebar menu should be hidden when page width is reduced

[bsatarnejad]

Ticket

https://community.openproject.org/wp/58454

What are you trying to accomplish?

While resizing the window, if the window size is small, hide the menu like when we reload the page.

Screenshots

Before:
https://github.com/user-attachments/assets/7fae43a9-0505-4f8d-9ef5-bff49760d4f3

After:
https://github.com/user-attachments/assets/7da06ace-4a34-4592-9364-195f07d2f184

What approach did you choose and why?

Hide the side menu while resizing if the window size is smaller than 1012px.

Merge checklist

• Added/updated tests
• Added/updated documentation in Lookbook (patterns, previews, etc)
• Tested major browsers (Chrome, Firefox, Edge, ...)

[dombesz]

Hi @bsatarnejad

I have one remark, the sidemenu is not showing up after the browser width was reduced and then increased. I believe the sidemenu should show up according to the specification.

When the browser page is reduced and the sidebar menu is hidden (after a reload for instance), it should be shown again when the browser page is widened (like when reloading, but without having to reload)

[bsatarnejad]

Hi @bsatarnejad

I have one remark, the sidemenu is not showing up after the browser width was reduced and then increased. I believe the sidemenu should show up according to the specification.

When the browser page is reduced and the sidebar menu is hidden (after a reload for instance), it should be shown again when the browser page is widened (like when reloading, but without having to reload)

Hi @dombesz thanks, It's good point to fix this issue too. 👍
Could you please review the PR again? @dombesz

[dombesz]

Thanks @bsatarnejad , the resizing now works correctly. However, if the sidebar is hidden, it will still reappear after a refresh of the page.

[bsatarnejad]

Thanks @bsatarnejad , the resizing now works correctly. However, if the sidebar is hidden, it will still reappear after a refresh of the page.

Thank you for sharing your feedback! The behavior you're seeing is actually the default for the sidebar menu, so this particular fix doesn't address the issue you've pointed out.

[dombesz]

Thanks @bsatarnejad , LGTM! 👍