wip(NcAppNavigation): provide reproducible example for focus-trap bug

[skip ci]

Signed-off-by: Maksim Sukharev <[email protected]>

src/components/NcAppNavigation/NcAppNavigation.vue

@@ -33,6 +33,128 @@ emit('toggle-navigation', {
 })
 ```
 
+```vue
+<template>
+	<!-- This is in most cases NcContent -->
+	<NcContent app-name="styleguidist" class="content-styleguidist">
+		<NcAppNavigation>
+			<template>
+				<div class="navigation__header">
+					<NcInputField :value.sync="searchValue" label="Search ..." />
+					<NcActions force-menu>
+						<NcActionButton close-after-click @click="showModal = true">
+							<template #icon>
+								<Cog />
+							</template>
+							App settings (close after click)
+						</NcActionButton>
+						<NcActionButton @click="showModal = true">
+							<template #icon>
+								<Cog />
+							</template>
+							App settings (handle only click)
+						</NcActionButton>
+					</NcActions>
+				</div>
+			</template>
+			<template #list>
+				<ul class="navigation__list">
+					<NcAppNavigationItem v-for="item in items" :key="item" :name="item">
+						<template #icon>
+							<Check :size="20" />
+						</template>
+					</NcAppNavigationItem>
+				</ul>
+			</template>
+			<template #footer>
+				<div class="navigation__footer">
+					<NcButton wide @click="showModal = true">
+						<template #icon>
+							<Cog />
+						</template>
+						App settings
+					</NcButton>
+					<NcModal v-if="showModal" @close="showModal = false">
+						<div class="modal-content">
+							<h2>Try to focus an input</h2>
+							<NcInputField :value.sync="modalValue" label="Focus me" />
+						</div>
+					</NcModal>
+				</div>
+			</template>
+		</NcAppNavigation>
+		<main class="main-content">
+			<NcEmptyContent class="main-content__placeholder"
+				name="Main content"
+				description="Replace it with your app content">
+				<template #icon>
+					<Cog />
+				</template>
+			</NcEmptyContent>
+		</main>
+	</NcContent>
+</template>
+
+<script>
+	import Check from 'vue-material-design-icons/Check'
+	import Cog from 'vue-material-design-icons/Cog'
+
+	export default {
+		components: {
+			Check,
+			Cog,
+		},
+		data() {
+			return {
+				items: Array.from({ length: 10 }, (v, i) => `Item ${i+1}`),
+				searchValue: '',
+				modalValue: '',
+				showSidebar: true,
+				showModal: false,
+			}
+		},
+	}
+</script>
+
+<style scoped>
+	/* This styles just mock NcContent and NcAppContent */
+	.content-styleguidist {
+		position: relative !important;
+		/* Just to prevent jumping when the sidebar is hidden */
+		height: 360px;
+		outline: 12px solid var(--color-primary);
+		background-color: var(--color-primary);
+	}
+
+	.navigation__list {
+		height: 100%;
+	}
+
+	.navigation__header,
+	.navigation__footer {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		padding: 4px;
+	}
+
+	.main-content {
+		position: static;
+		height: 100%;
+		width: 100%;
+		background-color: var(--color-main-background);
+	}
+
+	.main-content__placeholder {
+		height: 100%;
+	}
+
+	.modal-content {
+		height: 120px;
+		padding: 10px;
+	}
+</style>
+```
 </docs>
 
 <template>