From ad50cd17e7c289ebfaac52efb34fda63e2b43ba5 Mon Sep 17 00:00:00 2001
From: Maksym Portianoi <maksym.portianoi@konghq.com>
Date: Wed, 12 Feb 2025 13:45:01 -0500
Subject: [PATCH] fix(app-layout): sidebar item badge count truncation (#1951)

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

* fix: minor fix
---
 packages/core/app-layout/sandbox/pages/LayoutPage.vue         | 2 +-
 .../core/app-layout/src/components/sidebar/SidebarItem.vue    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core/app-layout/sandbox/pages/LayoutPage.vue b/packages/core/app-layout/sandbox/pages/LayoutPage.vue
index e772845eab..3debeae8f8 100644
--- 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
index e393e6c908..a36170dfc9 100644
--- 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)