fix(app-layout): sidebar item badge count truncation (#1951)

* fix(app-layout): sidebar item badge count truncation * fix: minor fix
Kong · Feb 12, 2025 · ad50cd1 · ad50cd1
1 parent d9c1b1a
commit ad50cd1
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/packages/core/app-layout/sandbox/pages/LayoutPage.vue b/packages/core/app-layout/sandbox/pages/LayoutPage.vue
@@ -287,7 +287,7 @@ const sidebarItemsTop = computed((): SidebarPrimaryItem[] => {
           active: activeItem.value?.name === 'Appearance',
         },
         {
-          name: 'Access Requests',
+          name: 'Access And Approvals',
           to: '/?access-requests',
           active: activeItem.value?.name === 'Access Requests',
           badgeCount: 100,

diff --git a/packages/core/app-layout/src/components/sidebar/SidebarItem.vue b/packages/core/app-layout/src/components/sidebar/SidebarItem.vue
@@ -35,7 +35,7 @@
           </div>
           <div class="sidebar-item-name-container">
             <div
-              v-if="subnavItem ? item.name.length < 25 : item.name.length < 18"
+              v-if="subnavItem && !itemHasBadge ? item.name.length < 25 : item.name.length < 18"
               class="sidebar-item-name truncate-text"
               :class="[subnavItem ? 'has-badge-max-width truncate-24' : 'truncate-17']"
             >
@@ -123,7 +123,7 @@ const openInNewWindow = computed((): boolean => {
   return props.item.newWindow && (props.item.to.startsWith('http') || props.item.to.startsWith('/'))
 })
 
-const itemHasBadge = computed(() => props.subnavItem && (props.item as SidebarSecondaryItem).badgeCount !== undefined)
+const itemHasBadge = computed((): boolean => props.subnavItem && (props.item as SidebarSecondaryItem).badgeCount !== undefined)
 
 const itemClick = (item: SidebarPrimaryItem | SidebarSecondaryItem): void => {
   emit('click', item)