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;
}

Unit Test Results

     27 files       27 suites   6m 33s ⏱️
   476 tests    476 ✔️ 0 💤 0 ❌
4 284 runs  4 283 ✔️ 1 💤 0 ❌

Results for commit e7451c5.

♻️ This comment has been updated with latest results.

@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.

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.

@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).