Add an overlay when the app navigation is open

[MarcelRobitaille]

Fixes #1117

What do you think of this solution? The hamburger menu is still kind of hard to see just because it's gray on gray. I made it so clicking the overlay also closes the navigation.

The alternative that I see is to add our own button to open the navigation in the header and our own button to close the navigation in the navigation itself. We would have to hide the current button. We would also have to use the isMobile mixin to see if the button should be present.

[seyfeb]

I'm not too deep in this, but just an idea: Is it possible to simply override the buttons css? E.g., add a semi-transparent white background to the button in the non-hover/non-active state? Just for demonstration, sth along the lines of:

.app-navigation > button {
  background-color: rgb(255, 255, 0.6);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

[github-actions[bot]]

Unit Test Results

     27 files       27 suites   6m 33s :stopwatch:    476 tests    476 :heavy_check_mark: 0 :zzz: 0 :x: 4 284 runs  4 283 :heavy_check_mark: 1 :zzz: 0 :x:

Results for commit e7451c52.

:recycle: This comment has been updated with latest results.

[MarcelRobitaille]

@seyfeb That could work. We'd need some more logic to show the default gray background on hover/focus when not in the overlay mode.

I am leaning towards hiding the stock button and using one in the sidebar itself. It seems cleaner to me, and I've already ranted about the stock button, so I'll spare you from that.

[christianlupus]

I consider the black/gray semi-transparent background a good solution like already suggested in #907 in another context. Apert, I am no friend of building too much blocks on our own duplicating the work done by the Nextcloud core team.

[MarcelRobitaille]

@christianlupus thanks for the feedback

Apert, I am no friend of building too much blocks on our own duplicating the work done by the Nextcloud core team.

I am open to suggestions for how to avoid this, but I don't really see any option. #1117 was opened because of a shortcoming of the core UI. The options I see are work around that or live with it. From what I can tell, #1117 is in some sense intended behaviour for nextcloud-vue. I see the same thing in other apps (e.g. calendar).