feat(NavigationMenu): conditionally-rendered links

[GalacticHypernova]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR introduces the possibility of conditionally rendered items in UNavigationMenu.

This improves the overall support UNavigationMenu will have to all kinds of navigations, including providing links to items that only need to exist under certain conditions.

For example, only an authorized user should see a link to their profile page.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@3169

commit: 0890729

[benjamincanac]

Not sure about this honestly, it's as easy to filter the items you provide in a computed.

[GalacticHypernova]

Well, true, but I don't see the harm in having it supported natively. You can argue that a lot of features nuxt ui provides can easily be made manually.

Do you foresee any issue with this?

[benjamincanac]

Not particularly but I mostly value consistency across components, this means this change would have to be made on all components having an items prop (as described in #1803 for example).

[GalacticHypernova]

Well, yea, this can be added to all such components including dropdown.

I see a major benefit in it for clickable lists with varying conditions.

Example:

Imagine a comment action drop-down. It might contain an edit action that should only be visible if it's either the original commenter or if the user is a staff member of higher prrmission than the commenter, a report action that would only be visible if the user is not the original commenter, and a delete action that would be visible if it's a staff member or if it's the original commenter.

Using it with computed would be cumbersome:

const commentActions = computed(()=>{
const actions = []
if (editCondition){
actions.push(editAction)
}
if (reportCondition){
actions.push(reportAction)
}
if (deleteCondition){
actions.push(deleteAction)
}
return actions
})

And using it directly in the template with buttons for each condition would be just recreating a drop-down without a drop-down.

In such a case, the condition would be really beneficial in my opinion, as it removes boilerplate in the template and in a computed