fix(NcAppSidebar): make sidebar a single node again to allow v-show, classes and attributes

[ShGKme]

☑️ Resolves

Makes <NcAppSidebar> rendered as a single node again.

• Fix [NcAppSidebar] v-show doesn't work on sidebar anymore because of Fragment #5623
• Fix fullscreen sidebar in Files
• Regression from: feat(NcAppSidebar): Allow to set open state to prevent focus trap issues on mobile #5584
• Has alternative: fix(NcAppSidebar): restore attrs and classes inheritance #5688
• <Fragment> breaks:
  • Passing attributes and classes, because in Vue 2 they are not a part of $attrs and even cannot be defined as $props
  • scoped styles from parent's data-v-{scopeid} on the root element
  • using v-show (but this is broken on mobile anyway and should not be used)
• <Transition> does not pass attributes with disabled inheritance (no idea why, but in vue 2 this component was not so pure)

Example of broken apps - Files:

• No cy-data-sidebar attributes for e2e
• No app-sidebar--full class
• No data-v-{scopeId} attr required for app-sidebar--full

Talk:

• Sidebar is always shown

🖼️ Screenshots

🏚️ Before	🏡 After

🚧 Tasks

• Make <NcAppSidebar> rendered as a single node again
• Render the toggle button using teleport

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 3️⃣ Backport to next requested with a Vue 3 upgrade

[susnux]

I vote for not backporting this to next and instead require to use open prop. Maybe introduce no-toggle prop to hide the toggle button.

[susnux]

Do you prefer this one? Because I think it adds a lot of complexity.
If yes I will free some time for a review 😅

[ShGKme]

Do you prefer this one?

I dislike both.

I think this is much simpler (check diff with hide whitespaces and without looking into docs — it's literally just removing <Fragment> and adding <Portal>).

But this could be more risky because we need to rely on #content-vue or another selector and because Teleport to a node inside Virtual DOM is always risky.

[susnux]

works.

I am fine with both solutions 🤷

[ShGKme]

• Rebased onto master to resolve conflicts
• Added a small fixup:
  • Removed inheritAttrs: false (not needed anymore)
  • Moved v-if from <NcButton> to <teleport> to not have unneeded teleport without button.

[Antreesy]

I'd personnaly prefer this solution (not a fan of several nodes under root template, now it's more predictable).
Tested, works fine as a middleground before moving to open.sync

[ShGKme]

Let's then go with this solution. While teleport is a bit risky, it allows making it a real single root component without hacks and drawbacks.

If we find a problem with Teleport, then we can proceed with the alternative solution.

I've added a check to make sure that it is used in NcContent when open prop is used. Maybe overhead.

[ShGKme]

Rebased onto master and squashed

[susnux]

@ShGKme backport?

[ShGKme]

/backport to next