From bd32d5d388c7c1e3c2cc2472f42aeb21ddbd2dce Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Wed, 19 Jun 2024 20:05:16 +0200
Subject: [PATCH] fixup! fix(NcAppSidebar): make sidebar a single node to allow
 using v-show

---
 src/components/NcAppSidebar/NcAppSidebar.vue | 26 +++++++++++++++++++-
 src/components/NcContent/NcContent.vue       |  1 +
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
index 673f4f3942..4a6afb92b7 100644
--- a/src/components/NcAppSidebar/NcAppSidebar.vue
+++ b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -537,7 +537,7 @@ export default {
 				So we cannot render the toggle button directly in this component.
 				As a simple solution - render it in the content to keep correct position.
 			-->
-			<Teleport v-if="!open && !noToggle" selector="#content-vue">
+			<Teleport v-if="ncContentSelector && !open && !noToggle" :selector="ncContentSelector">
 				<NcButton :aria-label="t('Open sidebar')"
 					class="app-sidebar__toggle"
 					:class="toggleClasses"
@@ -738,6 +738,13 @@ export default {
 		ClickOutside,
 	},
 
+	inject: {
+		ncContentSelector: {
+			from: 'NcContent:selector',
+			default: undefined,
+		},
+	},
+
 	props: {
 		active: {
 			type: String,
@@ -941,11 +948,15 @@ export default {
 
 		open() {
 			this.toggleFocusTrap()
+
+			this.checkToggleButtonContainerAvailability()
 		},
 	},
 
 	created() {
 		this.preserveElementToReturnFocus()
+
+		this.checkToggleButtonContainerAvailability()
 	},
 
 	mounted() {
@@ -1145,6 +1156,19 @@ export default {
 			this.$refs.tabs.focusActiveTabContent()
 		},
 
+		/**
+		 * Check if the toggle button container is available
+		 */
+		checkToggleButtonContainerAvailability() {
+			// Toggle button must be rendered, but there is no element to teleport it to
+			if (this.open === false && !this.noToggle && !this.ncContentSelector) {
+				console.warn(
+					'[NcAppSidebar] It looks like you want to use NcAppSidebar with the built-in toggle button. '
+					+ 'This feature is only available when NcAppSidebar is used in NcContent.',
+				)
+			}
+		},
+
 		/**
 		 * Emit name change event to parent component
 		 *
diff --git a/src/components/NcContent/NcContent.vue b/src/components/NcContent/NcContent.vue
index e2ec629636..85276e7a8a 100644
--- a/src/components/NcContent/NcContent.vue
+++ b/src/components/NcContent/NcContent.vue
@@ -113,6 +113,7 @@ export default {
 	provide() {
 		return {
 			'NcContent:setHasAppNavigation': this.setAppNavigation,
+			'NcContent:selector': '#content-vue',
 		}
 	},
 	props: {