fixup! fix(NcAppSidebar): make sidebar a single node to allow using v…

…-show

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
 		 *

src/components/NcContent/NcContent.vue

@@ -113,6 +113,7 @@ export default {
 	provide() {
 		return {
 			'NcContent:setHasAppNavigation': this.setAppNavigation,
+			'NcContent:selector': '#content-vue',
 		}
 	},
 	props: {