forms Reuse top bar component for responses view toggle

Replaces and closes #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

Mar 20 '23 18:03 susnux

Also @susnux a similar component was discussed at https://github.com/nextcloud/nextcloud-vue/issues/603#issuecomment-1232818711, cc @raimund-schluessler for reference. :)

Mar 27 '23 10:03 jancborchardt

* [ ]  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.

Mar 31 '23 18:03 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).

May 22 '23 22:05 susnux

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

Mobile: Screenshot 2024-03-22 at 13-25-04 dsfwf - Forms - Nextcloud