NcAppNavigation in mobile state blocks interacting with dialogs

[Antreesy]

When it's in mobile state, focus trap is attached to toggle, and thus any open dialog would be inaccessible from keyboard (not saying that I couldn't type in TextField)

Any known PR, where this regression could come from?

Originally posted by @Antreesy in https://github.com/nextcloud-libraries/nextcloud-vue/issues/5335#issuecomment-1985959176

[adripo]

The issue is also impacting cospend app. It happens with width < 512px. https://github.com/julien-nc/cospend-nc/issues/248

When clicking on the textarea, the focus is attached to the logo link instead of the textarea when width < 512px.

width 511px:

width 512px:

[susnux]

Not sure if the app navigation is the problem, as the same issue happens on the sidebar

[Antreesy]

My assumption is that any mounted/visible element with focus trap may affect it

[susnux]

Yes see #5584 for the sidebar.

Another option would be to watch the style property of a component and when display: none is set (v-show: false) then remove the focus trap.