From 0b86f4315e73cb97265b2b56e9b0954715263754 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 13 Dec 2024 12:43:15 +0100
Subject: [PATCH] docs(app): improve navigation badge display

---
 docs/app/components/Header.vue | 7 +------
 docs/app/layouts/docs.vue      | 7 +------
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/docs/app/components/Header.vue b/docs/app/components/Header.vue
index 299d2e97..ba58eb9e 100644
--- a/docs/app/components/Header.vue
+++ b/docs/app/components/Header.vue
@@ -80,7 +80,7 @@ defineShortcuts({
         <ModuleSelect />
       </div>
 
-      <UContentNavigation :navigation="navigation" highlight>
+      <UContentNavigation :navigation="navigation" highlight :ui="{ linkTrailingBadge: 'font-semibold uppercase' }">
         <template #link-title="{ link }">
           <span class="inline-flex items-center gap-0.5">
             {{ link.title }}
@@ -88,11 +88,6 @@ defineShortcuts({
             <sup v-if="link.module === 'ui-pro' && link.path.startsWith('/components')" class="text-[8px] font-medium text-(--ui-primary)">PRO</sup>
           </span>
         </template>
-        <template #link-trailing="{ link }">
-          <UBadge v-if="link.badge" variant="subtle" size="sm" color="neutral" class="rounded-[var(--ui-radius)] text-[9px] font-semibold uppercase">
-            {{ link.badge }}
-          </UBadge>
-        </template>
       </UContentNavigation>
     </template>
   </UHeader>
diff --git a/docs/app/layouts/docs.vue b/docs/app/layouts/docs.vue
index 36d77454..7ccaadac 100644
--- a/docs/app/layouts/docs.vue
+++ b/docs/app/layouts/docs.vue
@@ -17,7 +17,7 @@ const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
               </div>
             </template>
 
-            <UContentNavigation :navigation="navigation" highlight>
+            <UContentNavigation :navigation="navigation" highlight :ui="{ linkTrailingBadge: 'font-semibold uppercase' }">
               <template #link-title="{ link }">
                 <span class="inline-flex items-center gap-0.5">
                   {{ link.title }}
@@ -25,11 +25,6 @@ const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
                   <sup v-if="link.module === 'ui-pro' && link.path.startsWith('/components')" class="text-[8px] font-medium text-(--ui-primary)">PRO</sup>
                 </span>
               </template>
-              <template #link-trailing="{ link }">
-                <UBadge v-if="link.badge" variant="subtle" size="sm" color="neutral" class="rounded-[var(--ui-radius)] text-[9px] font-semibold uppercase">
-                  {{ link.badge }}
-                </UBadge>
-              </template>
             </UContentNavigation>
           </UPageAside>
         </template>