Reuse top bar component for responses view toggle

[susnux]

• Replaces and closes Response view switcher: Make accessible for keyboard and add hover effect  #1559

This is an alternative for #1559 to reuse the top bar menu. I split the TopBar component into TopBar and a reusable PillMenu component.

before	after

Why?

• Make the menu keyboard accessible
• Consistent look

[jancborchardt]

Awesome work @susnux! :) Only 2 things:

• On the "after" screenshot, the overall border is overlapped by the slight blue background of the selected item. It would look better if the selected item is fully within the border. Like in the View/Edit/Results switcher, see "After" video of More usable and accessible navigation between View/Edit/Results #1381
• It would probably be best to move this into the Vue components library directly? Cause I’d say this would look great for the tab navigation in the right sidebar as well, like in Files and Talk – what do you think @nimishavijay @marcoambrosini?

[jancborchardt]

Also @susnux a similar component was discussed at nextcloud-libraries/nextcloud-vue#603 (comment), cc @raimund-schluessler for reference. :)

[susnux]

* [ ]  On the "after" screenshot, the overall border is overlapped by the slight blue background of the selected item. It would look better if the selected item is fully within the border. Like in the View/Edit/Results switcher, see "After" video of [More usable and accessible navigation between View/Edit/Results #1381](https://github.com/nextcloud/forms/pull/1381)

This is currently broken (also on the view toggle), because NcContent introduced box-sizing: border-box so the height does include the border:

I fixed this with the latest commit.

* [ ]  It would probably be best to move this into the Vue components library directly? Cause I’d say this would look great for the tab navigation in the right sidebar as well, like in Files and Talk

Good idea, I will submit a PR soon.

[susnux]

This will then require @nextcloud/vue 8. But the current beta release does not work, we need to wait for the next one (issue with the nccheckboxradioswitch is already fixed but not released).

changes implemented

[susnux]

I have implemented the changes and switched to the checkboxradioswitch component.

Mobile:

Top bar:

Response view:

---

Also fixed on small mobile were previously the navigation was not accessible anymore (hidden outside the viewport) by now wrapping the top bar:

vokoscreenNG-2024-03-22_13-17-38.mp4