fix(NcAppNavigation): small screen support

[ShGKme]

☑️ Resolves

• Fix [BITV] Fix left sidebar from a11y perspective nextcloud/server#40954
• Chained on fix(NcAppNavigation): add focus trap on mobile and improve a11y #4633

There are 2 issues with a small screen:

1. On a very small screen (320px) the 300px navigation is too wide, the toggle button is out of viewport
2. The toggle button doesn't look good on top of content

🖼️ Screenshots

🏚️ Before	🏡 After

Toggle button on a different background:

🚧 Tasks

• Add max width to make navigation smaller on a small screen
• Add background to the toggle button

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable

[ShGKme]

@nextcloud-libraries/designers Design review request :)

[JuliaKirschenheuter]

wooow 🥳

[szaimen]

LGTM from design perspective for now. Improvements should be made later

[ShGKme]

I forgot to mention, that it is chained on #4633 and only the last one commit is related

[nimishavijay]

Looks good, I would say we can merge.

Mostly the "different color background" case wouldn't happen, and that's the only case where there's maybe we can improve things. We can check the behavior on different apps and see if we need any enhancements for design, so we can merge now :)

[jancborchardt]

Looks good from my side as well @ShGKme! :) Only a detail for follow-up: The toggle does not need an extra square background, it just needs a circular color-main-background as default

[ShGKme]

The toggle does not need an extra square background, it just needs a circular color-main-background as default

I wanted to make visible that this button is connected to the navigation sidebar and remove displaying any background content like the "ex" here:

Do you think this is redundant or there is a better way to do this?

[jancborchardt]

@ShGKme I would say it is redundant. It's just a floating button, the screenshot looks fine as is and in most cases the page is being interacted with and it's clear it's a button. :)

[susnux]

The only problem with the sidebar button is a lot of users can not find it if it overlays page content (got complains for this quite often (I think because it had no background and the icon mix up with text underneath).