docs(app): display icon in navigation for ui-pro components

This commit is contained in:
Benjamin Canac
2024-12-09 15:13:18 +01:00
parent eaddb8cb33
commit bf45094f89
2 changed files with 16 additions and 2 deletions

View File

@@ -80,7 +80,13 @@ defineShortcuts({
<FrameworkSelect />
</div>
<UContentNavigation :navigation="navigation" highlight />
<UContentNavigation :navigation="navigation" highlight>
<template #link-title="{ link }">
{{ link.title }}
<UIcon v-if="link.module === 'ui-pro' && link.path.startsWith('/components')" name="i-lucide-boxes" class="size-3 align-middle mb-[3px] text-(--ui-text-dimmed)" />
</template>
</UContentNavigation>
</template>
</UHeader>
</template>

View File

@@ -17,7 +17,15 @@ const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
</div>
</template>
<UContentNavigation :navigation="navigation" highlight />
<UContentNavigation :navigation="navigation" highlight>
<template #link-title="{ link }">
{{ link.title }}
<UTooltip v-if="link.module === 'ui-pro' && link.path.startsWith('/components')" text="Only available in nuxt/ui-pro" :content="{ side: 'right' }">
<UIcon name="i-lucide-boxes" class="size-3 align-middle mb-[3px] text-(--ui-text-dimmed) hover:text-(--ui-text-muted) transition-colors" />
</UTooltip>
</template>
</UContentNavigation>
</UPageAside>
</template>