UI Improvement in Sidebar menu

[SA0806]

Description:
When viewing the interface on smaller devices (such as phones or small tablets), the sidebar menu remains fully expanded instead of collapsing into a hamburger-style navigation menu. This causes layout issues and makes the UI difficult to navigate on mobile screens.

Expected Behavior:

• On small screen widths (e.g., below 768px), the sidebar should automatically collapse into a hamburger icon (☰).
• Tapping the hamburger icon should expand or collapse the sidebar navigation.
• The rest of the page (content area) should remain fully visible and responsive.

Actual Behavior:

• The sidebar stays fully visible on small screens.
• It overlaps or takes too much space, reducing readability of the main content area.

Screenshot:

Possible Solution:

• Implement responsive CSS using media queries (e.g., @media (max-width: 768px)) to hide the sidebar and show a hamburger button.
• Use JavaScript or a CSS framework (like Tailwind, Bootstrap, or custom logic) to toggle the sidebar visibility.

[GVodyanov]

Hey! Thanks for the design suggestion. Maybe you might want to bring this issue to https://github.com/nextcloud/appstore though? Seeing as that's where the screenshot comes from