From be3e7d43f258f61c6c4689c9c574d6ceb7cb1a25 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Sun, 14 May 2023 00:34:04 +0200
Subject: [PATCH 1/2] fix(NcAppSidebarTabs): fix render when tab and tabs are
 in different vue

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

wip

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/NcAppSidebar/NcAppSidebarTabs.vue   | 4 +++-
 src/components/NcAppSidebarTab/NcAppSidebarTab.vue | 8 +++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/NcAppSidebar/NcAppSidebarTabs.vue b/src/components/NcAppSidebar/NcAppSidebarTabs.vue
index 9fc59081c6..4ece2e3d9b 100644
--- a/src/components/NcAppSidebar/NcAppSidebarTabs.vue
+++ b/src/components/NcAppSidebar/NcAppSidebarTabs.vue
@@ -56,7 +56,9 @@
 					{{ tab.name }}
 				</span>
 				<template #icon>
-					<NcVNodes :vnodes="tab.renderIcon()" />
+					<NcVNodes :vnodes="tab.renderIcon()">
+						<span :class="tab.icon" />
+					</NcVNodes>
 				</template>
 			</NcCheckboxRadioSwitch>
 		</nav>
diff --git a/src/components/NcAppSidebarTab/NcAppSidebarTab.vue b/src/components/NcAppSidebarTab/NcAppSidebarTab.vue
index a0f77c276d..0196435ee5 100644
--- a/src/components/NcAppSidebarTab/NcAppSidebarTab.vue
+++ b/src/components/NcAppSidebarTab/NcAppSidebarTab.vue
@@ -41,8 +41,6 @@
 </template>
 
 <script>
-import { h } from 'vue'
-
 export default {
 	name: 'NcAppSidebarTab',
 
@@ -126,12 +124,12 @@ export default {
 		},
 
 		/**
-		 * Render tab's icon from slot or icon prop
+		 * Render tab's icon slot if any
 		 *
-		 * @return {import('vue').VNode|import('vue').VNode[]}
+		 * @return {import('vue').VNode[]}
 		 */
 		renderIcon() {
-			return this.$slots.icon || this.$scopedSlots.icon?.() || h('span', { staticClass: this.icon })
+			return this.$scopedSlots.icon?.()
 		},
 	},
 }

From b6c8df4aa28a9498f8ddd365d2b629401f494dc7 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Sat, 13 May 2023 23:39:23 +0200
Subject: [PATCH 2/2] fix(NcAppSidebarTabs): fix CSS icon width

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/NcAppSidebar/NcAppSidebarTabs.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/NcAppSidebar/NcAppSidebarTabs.vue b/src/components/NcAppSidebar/NcAppSidebarTabs.vue
index 4ece2e3d9b..88a3f26e22 100644
--- a/src/components/NcAppSidebar/NcAppSidebarTabs.vue
+++ b/src/components/NcAppSidebar/NcAppSidebarTabs.vue
@@ -57,7 +57,7 @@
 				</span>
 				<template #icon>
 					<NcVNodes :vnodes="tab.renderIcon()">
-						<span :class="tab.icon" />
+						<span class="app-sidebar-tabs__tab-icon" :class="tab.icon" />
 					</NcVNodes>
 				</template>
 			</NcCheckboxRadioSwitch>
@@ -285,6 +285,13 @@ export default {
 			text-overflow: ellipsis;
 			text-align: center;
 		}
+
+		&-icon {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background-size: 20px;
+		}
 	}
 
 	&__content {