Fix NcAppSidebar reactivity

Signed-off-by: Raimund Schlüßler <[email protected]>
nextcloud-libraries · Feb 12, 2023 · 8b0d807 · 8b0d807
1 parent a17ea96
commit 8b0d807
Showing 1 changed file with 9 additions and 19 deletions.
diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -158,14 +158,14 @@ include a standard-header like it's used by the files app.
 		@after-leave="onAfterLeave">
 		<aside id="app-sidebar-vue" class="app-sidebar">
 			<header :class="{
-					'app-sidebar-header--with-figure': hasFigure,
+					'app-sidebar-header--with-figure': isSlotPopulated($slots?.header?.()) || background,
 					'app-sidebar-header--compact': compact,
 				}"
 				class="app-sidebar-header">
 				<!-- container for figure and description, allows easy switching to compact mode -->
 				<div class="app-sidebar-header__info">
 					<!-- sidebar header illustration/figure -->
-					<div v-if="hasFigure && !empty"
+					<div v-if="(isSlotPopulated($slots?.header?.()) || background) && !empty"
 						:class="{
 							'app-sidebar-header__figure--with-action': hasFigureClickListener
 						}"
@@ -182,14 +182,14 @@ include a standard-header like it's used by the files app.
 					<!-- sidebar details -->
 					<div v-if="!empty"
 						:class="{
-							'app-sidebar-header__desc--with-tertiary-action': canStar || hasTertiaryActions,
+							'app-sidebar-header__desc--with-tertiary-action': canStar || isSlotPopulated($slots?.['tertiary-actions']?.()),
 							'app-sidebar-header__desc--editable': titleEditable && !subtitle,
 							'app-sidebar-header__desc--with-subtitle--editable': titleEditable && subtitle,
-							'app-sidebar-header__desc--without-actions': !hasSecondaryActions,
+							'app-sidebar-header__desc--without-actions': !isSlotPopulated($slots?.['secondary-actions']?.()),
 						}"
 						class="app-sidebar-header__desc">
 						<!-- favourite icon -->
-						<div v-if="canStar || hasTertiaryActions" class="app-sidebar-header__tertiary-actions">
+						<div v-if="canStar || isSlotPopulated($slots?.['tertiary-actions']?.())" class="app-sidebar-header__tertiary-actions">
 							<slot name="tertiary-actions">
 								<NcButton v-if="canStar"
 									:aria-label="favoriteTranslated"
@@ -240,7 +240,7 @@ include a standard-header like it's used by the files app.
 									</form>
 								</template>
 								<!-- header main menu -->
-								<NcActions v-if="hasSecondaryActions"
+								<NcActions v-if="isSlotPopulated($slots?.['secondary-actions']?.())"
 									class="app-sidebar-header__menu"
 									:force-menu="forceMenu">
 									<slot name="secondary-actions" />
@@ -267,7 +267,7 @@ include a standard-header like it's used by the files app.
 					</template>
 				</NcButton>
 
-				<div v-if="hasDescription && !empty" class="app-sidebar-header__description">
+				<div v-if="isSlotPopulated($slots?.description?.()) && !empty" class="app-sidebar-header__description">
 					<slot name="description" />
 				</div>
 			</header>
@@ -464,18 +464,6 @@ export default {
 		canStar() {
 			return this.isStarred !== null
 		},
-		hasDescription() {
-			return isSlotPopulated(this.$slots?.description?.())
-		},
-		hasFigure() {
-			return isSlotPopulated(this.$slots?.header?.()) || this.background
-		},
-		hasSecondaryActions() {
-			return isSlotPopulated(this.$slots?.['secondary-actions']?.())
-		},
-		hasTertiaryActions() {
-			return isSlotPopulated(this.$slots?.['tertiary-actions']?.())
-		},
 		hasFigureClickListener() {
 			return this.$attrs['figure-click']
 		},
@@ -493,6 +481,8 @@ export default {
 	},
 
 	methods: {
+		isSlotPopulated,
+
 		onBeforeEnter(element) {
 			/**
 			 * The sidebar is opening and the transition is in progress