make the sidebare full-width on small screens

[szaimen]

Close nextcloud/calendar#4161

Before	After

Signed-off-by: szaimen [email protected]

[raimund-schluessler]

We need to hide the appnavigation toggle on the top left then, otherwise the tertiary actions of the sidebar become unusable.

See Tasks for example, the toggle overlays the complete checkbox:

I think in this case it's fine to have the toggle behind the sidebar. You need to close the sidebar to open the navigation, but that keeps the sidebar usable.

[szaimen]

@raimund-schluessler I suppose this needs to be done in javascript since the css is scoped?

[raimund-schluessler]

@raimund-schluessler I suppose this needs to be done in javascript since the css is scoped?

Not necessarily, you can either use ::v-deep at the root level, or add a second style block without the scope attribute like <style lang="scss">. The question rather is what's the proper CSS code to make it work 😄

[raimund-schluessler]

@raimund-schluessler I suppose this needs to be done in javascript since the css is scoped?

Not necessarily, you can either use ::v-deep at the root level, or add a second style block without the scope attribute like <style lang="scss">. The question rather is what's the proper CSS code to make it work 😄

Reducing the z-index of the AppNavigation to e.g. 1400, a value lower than the one of AppSidebar (1500) could be an option to fix it:
https://github.com/nextcloud/nextcloud-vue/blob/befbd70453aad32657686c8a3ddf2250fe1a5490/src/components/AppNavigation/AppNavigation.vue#L151

But this might have side effects. The result would be that AppSidebar would always be on top of AppNavigation. On large screens, I think that's no issue, since they won't overlap. On small screens (width < breakpoint-mobile/2, i.e. 512 px), it could be fine as well, since AppSidebar will just take the whole width and you need to close the sidebar to open navigation. Only on intermediate screen with a width between 512 px and 600 px (min-width of navigation 300 px plus min-width of sidebar 300 px) the overlap might be an issue.

[raimund-schluessler]

Or, one leaves this to the app developer to hide the toggle if the sidebar is open on small screens 🙈. Because from the nextcloud-vue components, we have no easy way to figure out whether the sidebar is open (visible) or not (but I would very well be missing something).

[szaimen]

What about cd98e1d @raimund-schluessler ? :)

[raimund-schluessler]

What about cd98e1d @raimund-schluessler ? :)

Nice, good idea. I didn't test it though.

[st3iny]

Tested and works.