feat(NcAppSidebar): add 'content' slot and 'noClose' prop

[Antreesy]

☑️ Resolves

• Allows to put custom content with content slot
• Allows to hide close button with noClose prop (for custom implementation in the proper layout)
• See https://github.com/nextcloud-libraries/nextcloud-vue/pull/6666/files?w=1 for non-whitespace changes
• See https://github.com/nextcloud-libraries/nextcloud-vue/tree/feat/noid/appsidebar-header-empty-slot-vue2 for Vue2 branch to test with apps

🖼️ Screenshots

Quick prototype for Talk:

Clean	WIth explanation

2025-04-23_13h59_29.mp4

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 3️⃣ Backport to stable8 requested

[susnux]

technically makes sense - not sure about design.
But in general I like the idea of splitting it into a layout component and the specialized components, so 👍

[DorraJaouad]

Makes sense

[ShGKme]

Sidebar must be focused on open, we cannot just hide the error here... I'll check tomorrow with a screen reader.

[Antreesy]

what about:

const element = tabbable(this.$refs.sidebar)[0]
if (element) {
	element.focus()
}

Then it either will fall back either to:

• focusable/tabbable elements provided by developers
• close button
• <here we can throw a warning, I guess>

this.$refs.header is either non-visible or has tabindex -1, it should not be in focus in both cases

[susnux]

For screen readers you could also focus non interactive elements to update the position of the "viewer"

[Antreesy]

checking main branch now:

• ref="toggle" was lost in 6e13c04
• focus() method has it: (this.$refs.header ?? this.$refs.toggle?.$el)?.focus()
• should be this.$refs.toggle?.$el, or NcButton should implement and expose focus()

[susnux]

Paddings seem to be off, also close button will not be placed consistent.
I think we need to polish the implementation a bit before pushing this to public API.

[Antreesy]

Added --app-sidebar-close-button-offset variable exposed to <header class="app-sidebar-header"> descendants:

noClose - true	noClose - false

The rest of paddings are set by default header content, and should not be enforced to custom content (like with background-image, there might be a need to fill all the space available)

As all of the new stuff, moved to main branch to settle it here first.