From 612fa756c1152a75626640451cb26ba1effff837 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Tue, 21 May 2024 18:03:15 +0200
Subject: [PATCH] fix(NcAppSidebar): make sidebar a single node to allow using
 v-show

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/NcAppSidebar/NcAppSidebar.vue | 450 ++++++++++++-------
 src/components/NcContent/NcContent.vue       |   1 +
 2 files changed, 280 insertions(+), 171 deletions(-)

diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
index f259441acf..4a6afb92b7 100644
--- a/src/components/NcAppSidebar/NcAppSidebar.vue
+++ b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -354,14 +354,17 @@ A working alternative would be using an icon together with an `aria-label`:
 	</script>
 ```
 
-### Conditionally show the sidebar
+### Conditionally show the sidebar with `open`
 
-If the sidebar should be shown conditionally (e.g. using a button)
-and the users are expected to open and close the sidebar multiple times,
-then using `v-if` might result in bad performance.
-So instead use the `open` property.
+If the sidebar should be shown conditionally, you can use `open` prop to define sidebar visibility.
+It automatically shows a toggle button to open the sidebar if it is closed.
 
-You can also use `--app-sidebar-offset` CSS variable to preserve space for the toggle button, for example, in top bar of NcAppContent.
+You can also use `--app-sidebar-offset` CSS variable to preserve space
+for the toggle button, for example, in top bar of `NcAppContent`.
+
+The built-in toggle button can be removed with `no-toggle` prop.
+
+Note: the built-in toggle button is only available then NcAppSidebar is used in NcContent.
 
 ```vue
 <template>
@@ -369,9 +372,7 @@ You can also use `--app-sidebar-offset` CSS variable to preserve space for the t
 	<NcContent app-name="styleguidist" class="content-styleguidist">
 		<NcAppContent>
 			<div class="top-bar">
-				<NcButton @click.prevent="showSidebar = !showSidebar">
-					Toggle sidebar
-				</NcButton>
+				<NcButton type="primary">Start a call</NcButton>
 			</div>
 		</NcAppContent>
 		<!-- The sidebar -->
@@ -434,178 +435,265 @@ export default {
 }
 </style>
 ```
-</docs>
 
+### Conditionally show the sidebar programmatically with `v-if`
+
+If the sidebar should be shown conditionally without any explicit toggle button, you can use `v-if`.
+
+**Note about performance**: using `v-if` might result in bad performance and loosing sidebar content state.
+
+**Note about `v-show`**: using `v-show` to hide sidebar will result in usability issues due to active focus trap on mobile.
+
+```vue
 <template>
-	<Fragment>
-		<!-- With vue3 we can move this inside the transition, but vue2 does not allow v-show in transition -->
-		<NcButton v-if="!open && !noToggle"
-			:aria-label="t('Open sidebar')"
-			class="app-sidebar__toggle"
-			:class="toggleClasses"
-			v-bind="toggleAttrs"
-			type="tertiary"
-			@click="$emit('update:open', true)">
-			<template #icon>
-				<!-- @slot Custom icon for the toggle button, defaults to the dock-right icon from MDI -->
-				<slot name="toggle-icon">
-					<IconDockRight :size="20" />
-				</slot>
-			</template>
-		</NcButton>
-		<transition appear
-			name="slide-right"
-			v-bind="$attrs"
-			v-on="$listeners"
-			@before-enter="onBeforeEnter"
-			@after-enter="onAfterEnter"
-			@before-leave="onBeforeLeave"
-			@after-leave="onAfterLeave">
-			<aside v-show="open"
-				id="app-sidebar-vue"
-				ref="sidebar"
-				class="app-sidebar"
-				:aria-labelledby="`app-sidebar-vue-${uid}__header`"
-				@keydown.esc="onKeydownEsc">
-				<header :class="{
-						'app-sidebar-header--with-figure': hasFigure,
-						'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"
-							:class="{
-								'app-sidebar-header__figure--with-action': hasFigureClickListener
-							}"
-							class="app-sidebar-header__figure"
-							:style="{
-								backgroundImage: `url(${background})`
-							}"
-							tabindex="0"
-							@click="onFigureClick"
-							@keydown.enter="onFigureClick">
-							<slot class="app-sidebar-header__background" name="header" />
-						</div>
+	<!-- This is in most cases NcContent -->
+	<NcContent app-name="styleguidist" class="content-styleguidist">
+		<NcAppContent>
+			<div class="top-bar">
+				<NcButton @click.prevent="showSidebar = true">
+					Toggle sidebar
+				</NcButton>
+			</div>
+		</NcAppContent>
+		<!-- The sidebar -->
+		<NcAppSidebar
+			v-if="showSidebar"
+			name="cat-picture.jpg"
+			subname="last edited 3 weeks ago"
+			@close="showSidebar = false">
+			<NcAppSidebarTab name="Settings" id="settings-tab">
+				<template #icon>
+					<Cog :size="20" />
+				</template>
+				Single tab content
+			</NcAppSidebarTab>
+		</NcAppSidebar>
+	</NcContent>
+</template>
 
-						<!-- sidebar details -->
-						<div v-if="!empty"
-							:class="{
-								'app-sidebar-header__desc--with-tertiary-action': canStar || $slots['tertiary-actions'],
-								'app-sidebar-header__desc--editable': nameEditable && !subname,
-								'app-sidebar-header__desc--with-subname--editable': nameEditable && subname,
-								'app-sidebar-header__desc--without-actions': !$slots['secondary-actions'],
-							}"
-							class="app-sidebar-header__desc">
-							<!-- favourite icon -->
-							<div v-if="canStar || $slots['tertiary-actions']" class="app-sidebar-header__tertiary-actions">
-								<slot name="tertiary-actions">
-									<NcButton v-if="canStar"
-										:aria-label="favoriteTranslated"
-										:pressed="isStarred"
-										class="app-sidebar-header__star"
-										type="secondary"
-										@click.prevent="toggleStarred">
-										<template #icon>
-											<NcLoadingIcon v-if="starLoading" />
-											<Star v-else-if="isStarred" :size="20" />
-											<StarOutline v-else :size="20" />
-										</template>
-									</NcButton>
-								</slot>
-							</div>
+<script>
+import Cog from 'vue-material-design-icons/Cog'
+
+export default {
+	components: {
+		Cog,
+	},
+	data() {
+		return {
+			showSidebar: true,
+		}
+	},
+}
+</script>
+<style scoped>
+/* This styles just mock NcContent and NcAppContent */
+.content-styleguidist {
+	position: relative !important;
+	/* Just to prevent jumping when the sidebar is hidden */
+	min-height: 360px;
+}
 
-							<!-- name -->
-							<div class="app-sidebar-header__name-container">
-								<div class="app-sidebar-header__mainname-container">
-									<!-- main name -->
-									<h2 v-show="!nameEditable"
-										:id="`app-sidebar-vue-${uid}__header`"
-										ref="header"
-										v-linkify="{text: name, linkify: linkifyName}"
-										:aria-label="title"
-										:title="title"
-										class="app-sidebar-header__mainname"
-										:tabindex="nameEditable ? 0 : -1"
-										@click.self="editName">
-										{{ name }}
-									</h2>
-									<template v-if="nameEditable">
-										<form v-click-outside="() => onSubmitName()"
-											class="app-sidebar-header__mainname-form"
-											@submit.prevent="onSubmitName">
-											<input ref="nameInput"
-												v-focus
-												class="app-sidebar-header__mainname-input"
-												type="text"
-												:placeholder="namePlaceholder"
-												:value="name"
-												@keydown.esc.stop="onDismissEditing"
-												@input="onNameInput">
-											<NcButton type="tertiary-no-background"
-												:aria-label="changeNameTranslated"
-												native-type="submit">
-												<template #icon>
-													<ArrowRight :size="20" />
-												</template>
-											</NcButton>
-										</form>
+.main-content {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+}
+
+/* Fix styles on this style guide page */
+@media only screen and (max-width: 512px) {
+	:deep(aside) {
+		width: calc(100vw - 64px) !important;
+	}
+}
+
+.top-bar {
+	display: flex;
+	justify-content: flex-end;
+	/* preserve space for toggle button */
+	padding-inline-end: var(--app-sidebar-offset);
+	/* same as on toggle button, but doesn't have to be the same */
+	margin: var(--app-sidebar-padding);
+}
+</style>
+```
+</docs>
+
+<template>
+	<transition appear
+		name="slide-right"
+		@before-enter="onBeforeEnter"
+		@after-enter="onAfterEnter"
+		@before-leave="onBeforeLeave"
+		@after-leave="onAfterLeave">
+		<aside v-show="open"
+			id="app-sidebar-vue"
+			ref="sidebar"
+			class="app-sidebar"
+			:aria-labelledby="`app-sidebar-vue-${uid}__header`"
+			@keydown.esc="onKeydownEsc">
+			<!--
+				We cannot render toggle button inside sidebar (aside#app-sidebar-vue), because it is hidden then the toggle is needed.
+				But we also need transition with the sidebar to be the root of this component to use it as a single UI element, allowing to use `v-show`.
+				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="ncContentSelector && !open && !noToggle" :selector="ncContentSelector">
+				<NcButton :aria-label="t('Open sidebar')"
+					class="app-sidebar__toggle"
+					:class="toggleClasses"
+					type="tertiary"
+					v-bind="toggleAttrs"
+					@click="$emit('update:open', true)">
+					<template #icon>
+						<!-- @slot Custom icon for the toggle button, defaults to the dock-right icon from MDI -->
+						<slot name="toggle-icon">
+							<IconDockRight :size="20" />
+						</slot>
+					</template>
+				</NcButton>
+			</Teleport>
+
+			<header :class="{
+					'app-sidebar-header--with-figure': hasFigure,
+					'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"
+						:class="{
+							'app-sidebar-header__figure--with-action': hasFigureClickListener
+						}"
+						class="app-sidebar-header__figure"
+						:style="{
+							backgroundImage: `url(${background})`
+						}"
+						tabindex="0"
+						@click="onFigureClick"
+						@keydown.enter="onFigureClick">
+						<slot class="app-sidebar-header__background" name="header" />
+					</div>
+
+					<!-- sidebar details -->
+					<div v-if="!empty"
+						:class="{
+							'app-sidebar-header__desc--with-tertiary-action': canStar || $slots['tertiary-actions'],
+							'app-sidebar-header__desc--editable': nameEditable && !subname,
+							'app-sidebar-header__desc--with-subname--editable': nameEditable && subname,
+							'app-sidebar-header__desc--without-actions': !$slots['secondary-actions'],
+						}"
+						class="app-sidebar-header__desc">
+						<!-- favourite icon -->
+						<div v-if="canStar || $slots['tertiary-actions']" class="app-sidebar-header__tertiary-actions">
+							<slot name="tertiary-actions">
+								<NcButton v-if="canStar"
+									:aria-label="favoriteTranslated"
+									:pressed="isStarred"
+									class="app-sidebar-header__star"
+									type="secondary"
+									@click.prevent="toggleStarred">
+									<template #icon>
+										<NcLoadingIcon v-if="starLoading" />
+										<Star v-else-if="isStarred" :size="20" />
+										<StarOutline v-else :size="20" />
 									</template>
-									<!-- header main menu -->
-									<NcActions v-if="$slots['secondary-actions']"
-										class="app-sidebar-header__menu"
-										:force-menu="forceMenu">
-										<slot name="secondary-actions" />
-									</NcActions>
-								</div>
-								<!-- secondary name -->
-								<p v-if="subname.trim() !== '' || $slots['subname']"
-									:title="subtitle || undefined"
-									class="app-sidebar-header__subname">
-									<!-- @slot Alternative to the `subname` prop can be used for more complex conent. It will be rendered within a `p` tag. -->
-									<slot name="subname">
-										{{ subname }}
-									</slot>
-								</p>
+								</NcButton>
+							</slot>
+						</div>
+
+						<!-- name -->
+						<div class="app-sidebar-header__name-container">
+							<div class="app-sidebar-header__mainname-container">
+								<!-- main name -->
+								<h2 v-show="!nameEditable"
+									:id="`app-sidebar-vue-${uid}__header`"
+									ref="header"
+									v-linkify="{text: name, linkify: linkifyName}"
+									:aria-label="title"
+									:title="title"
+									class="app-sidebar-header__mainname"
+									:tabindex="nameEditable ? 0 : -1"
+									@click.self="editName">
+									{{ name }}
+								</h2>
+								<template v-if="nameEditable">
+									<form v-click-outside="() => onSubmitName()"
+										class="app-sidebar-header__mainname-form"
+										@submit.prevent="onSubmitName">
+										<input ref="nameInput"
+											v-focus
+											class="app-sidebar-header__mainname-input"
+											type="text"
+											:placeholder="namePlaceholder"
+											:value="name"
+											@keydown.esc.stop="onDismissEditing"
+											@input="onNameInput">
+										<NcButton type="tertiary-no-background"
+											:aria-label="changeNameTranslated"
+											native-type="submit">
+											<template #icon>
+												<ArrowRight :size="20" />
+											</template>
+										</NcButton>
+									</form>
+								</template>
+								<!-- header main menu -->
+								<NcActions v-if="$slots['secondary-actions']"
+									class="app-sidebar-header__menu"
+									:force-menu="forceMenu">
+									<slot name="secondary-actions" />
+								</NcActions>
 							</div>
+							<!-- secondary name -->
+							<p v-if="subname.trim() !== '' || $slots['subname']"
+								:title="subtitle || undefined"
+								class="app-sidebar-header__subname">
+								<!-- @slot Alternative to the `subname` prop can be used for more complex conent. It will be rendered within a `p` tag. -->
+								<slot name="subname">
+									{{ subname }}
+								</slot>
+							</p>
 						</div>
 					</div>
+				</div>
+
+				<NcButton ref="closeButton"
+					:title="closeTranslated"
+					:aria-label="closeTranslated"
+					type="tertiary"
+					class="app-sidebar__close"
+					@click.prevent="closeSidebar">
+					<template #icon>
+						<Close :size="20" />
+					</template>
+				</NcButton>
 
-					<NcButton ref="closeButton"
-						:title="closeTranslated"
-						:aria-label="closeTranslated"
-						type="tertiary"
-						class="app-sidebar__close"
-						@click.prevent="closeSidebar">
-						<template #icon>
-							<Close :size="20" />
-						</template>
-					</NcButton>
-
-					<div v-if="$slots['description'] && !empty" class="app-sidebar-header__description">
-						<slot name="description" />
-					</div>
-				</header>
+				<div v-if="$slots['description'] && !empty" class="app-sidebar-header__description">
+					<slot name="description" />
+				</div>
+			</header>
 
-				<NcAppSidebarTabs v-show="!loading"
-					ref="tabs"
-					:active="active"
-					@update:active="onUpdateActive">
-					<slot />
-				</NcAppSidebarTabs>
+			<NcAppSidebarTabs v-show="!loading"
+				ref="tabs"
+				:active="active"
+				@update:active="onUpdateActive">
+				<slot />
+			</NcAppSidebarTabs>
 
-				<NcEmptyContent v-if="loading">
-					<template #icon>
-						<NcLoadingIcon :size="64" />
-					</template>
-				</NcEmptyContent>
-			</aside>
-		</transition>
-	</Fragment>
+			<NcEmptyContent v-if="loading">
+				<template #icon>
+					<NcLoadingIcon :size="64" />
+				</template>
+			</NcEmptyContent>
+		</aside>
+	</transition>
 </template>
 
 <script>
+// TODO: This is built-in for vue3 just drop the import
+import { Portal as Teleport } from '@linusborg/vue-simple-portal'
+
 import NcAppSidebarTabs from './NcAppSidebarTabs.vue'
 import NcActions from '../NcActions/index.js'
 import NcLoadingIcon from '../NcLoadingIcon/index.js'
@@ -618,7 +706,6 @@ import GenRandomId from '../../utils/GenRandomId.js'
 import { getTrapStack } from '../../utils/focusTrap.js'
 import { t } from '../../l10n.js'
 
-import { Fragment } from 'vue-frag'
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import Close from 'vue-material-design-icons/Close.vue'
 import IconDockRight from 'vue-material-design-icons/DockRight.vue'
@@ -632,7 +719,7 @@ export default {
 	name: 'NcAppSidebar',
 
 	components: {
-		Fragment,
+		Teleport,
 		NcActions,
 		NcAppSidebarTabs,
 		ArrowRight,
@@ -651,7 +738,12 @@ export default {
 		ClickOutside,
 	},
 
-	inheritAttrs: false,
+	inject: {
+		ncContentSelector: {
+			from: 'NcContent:selector',
+			default: undefined,
+		},
+	},
 
 	props: {
 		active: {
@@ -856,11 +948,15 @@ export default {
 
 		open() {
 			this.toggleFocusTrap()
+
+			this.checkToggleButtonContainerAvailability()
 		},
 	},
 
 	created() {
 		this.preserveElementToReturnFocus()
+
+		this.checkToggleButtonContainerAvailability()
 	},
 
 	mounted() {
@@ -1060,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
 		 *
@@ -1158,7 +1267,6 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
 */
 .app-sidebar {
 	--app-sidebar-width: clamp(300px, 27vw, 500px);
-	--app-sidebar-padding: #{$app-navigation-padding};
 	width: var(--app-sidebar-width);
 
 	z-index: 1500;
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: {