fix(NcAppNavigationItem): use $scopedSlots instead of $slots

[st3iny]

☑️ Resolves

• Fix Mailbox actions are broken nextcloud/mail#10270

Used to programmatically access scoped slots. For each slot, including the default one, the object contains a corresponding function that returns VNodes.

Ref https://v2.vuejs.org/v2/api/#vm-scopedSlots

🖼️ Screencasts

Before

Bildschirmaufnahme_20241022_194043.webm

After

Bildschirmaufnahme_20241022_193652.webm

🏁 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

[ShGKme]

I'm not sure, $scopedSlots is always available in beforeUpdate in Vue 2.

Also, !!this.$slots.default is false when the is this.$scopedSlots.default with an empty result.

[ShGKme]

Let's remove hasChildren completely, it can be replaced with this.$scopedSlots.default in the template.

And collapsible I'd replace with a method, so we don't change state before update and directly call it during the render.

[st3iny]

I agree, the logic is a bit hacky. I refactored the code according to your recommendations and pushed another commit.

[Antreesy]

LGTM

[ShGKme]

Could you test that it still works dynamically generated content, when the list is empty?

[st3iny]

Could you test that it still works dynamically generated content, when the list is empty?

What exactly do you mean with "dynamically generated content"? I tested it in Mail with my latest changes. The collapse toggle will be shown when there are children (and collapsing is allowed via the prop). Otherwise, it won't be shown.

[st3iny]

/backport to next

[backportbot]

The backport to next failed. Please do this backport manually.

# Switch to the target branch and update it
git checkout next
git pull origin next

# Create the new backport branch
git checkout -b backport/6161/next

# Cherry pick the change from the commit sha1 of the change against the default branch
# This might cause conflicts, resolve them
git cherry-pick 16702a37

# Push the cherry pick commit to the remote repository and open a pull request
git push origin backport/6161/next

Error: No changes found in backport branch

---

Learn more about backports at https://docs.nextcloud.com/server/stable/go.php?to=developer-backports.

[ShGKme]

What exactly do you mean with "dynamically generated content"? I tested it in Mail with my latest changes. The collapse toggle will be shown when there are children (and collapsing is allowed via the prop). Otherwise, it won't be shown.

When the value of children dynamically changes from 0 to N and back without component re-mounting.

$scopedSlots and $slots are different, especially with the default slot. $scopedSlots.default may not be falsy, while $scopedSlots.default() is actually empty (renders no real content).

Tested on netlify that if works fine now.