From f582bae65d78caf6f4730ed5bcb1d901b2203342 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Mon, 22 Jul 2024 14:08:34 +0200
Subject: [PATCH] chore: Make the `NcAppNavigationSearch` a fully separated
 component

Co-authored-by: Grigorii K. Shartsev <me@shgk.me>
Co-authored-by: Ferdinand Thiessen <opensource@fthiessen.de>
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 .../NcAppNavigation/NcAppNavigation.vue       | 174 +----------
 .../NcAppNavigation/NcAppNavigationSearch.vue | 123 --------
 .../NcAppNavigationItem.vue                   |  20 +-
 .../NcAppNavigationNewItem.vue                |   6 +-
 .../NcAppNavigationSearch.vue                 | 272 ++++++++++++++++++
 src/components/NcAppNavigationSearch/index.js |   6 +
 src/components/index.js                       |   1 +
 styleguide.config.js                          |   1 -
 8 files changed, 307 insertions(+), 296 deletions(-)
 delete mode 100644 src/components/NcAppNavigation/NcAppNavigationSearch.vue
 create mode 100644 src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue
 create mode 100644 src/components/NcAppNavigationSearch/index.js

diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
index 86146841bc..c1ef3db15c 100644
--- a/src/components/NcAppNavigation/NcAppNavigation.vue
+++ b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -33,117 +33,6 @@ emit('toggle-navigation', {
 })
 ```
 
-#### With in-app search
-
-```vue
-<template>
-	<div class="styleguide-wrapper">
-		<NcContent app-name="styleguide-app-navigation" class="content-styleguidist">
-			<NcAppNavigation show-search :search.sync="searchQuery">
-				<template #search-actions>
-					<NcActions aria-label="Filters">
-						<template #icon>
-							<IconFilter :size="20" />
-						</template>
-						<NcActionButton>
-							<template #icon>
-								<IconAccount :size="20" />
-							</template>
-							Filter by name
-						</NcActionButton>
-						<NcActionButton>
-							<template #icon>
-								<IconCalendarAccount :size="20" />
-							</template>
-							Filter by year
-						</NcActionButton>
-					</NcActions>
-					<NcButton aria-label="Search globally" type="tertiary">
-						<template #icon>
-							<IconSearchGlobal :size="20" />
-						</template>
-					</NcButton>
-				</template>
-				<template #list>
-					<NcAppNavigationItem name="First navigation entry">
-						<template #icon>
-							<IconStar :size="20" />
-						</template>
-					</NcAppNavigationItem>
-					<NcAppNavigationItem name="Second navigation entry">
-						<template #icon>
-							<IconStar :size="20" />
-						</template>
-					</NcAppNavigationItem>
-				</template>
-			</NcAppNavigation>
-			<NcAppContent>
-				<ul class="fake-content">
-					<li>Search query: {{ searchQuery }}</li>
-					<li v-for="(item, index) in items" :key="index">
-						{{ item }}
-					</li>
-				</ul>
-			</NcAppContent>
-		</NcContent>
-	</div>
-</template>
-<script>
-import IconAccount from 'vue-material-design-icons/Account.vue'
-import IconCalendarAccount from 'vue-material-design-icons/CalendarAccount.vue'
-import IconFilter from 'vue-material-design-icons/Filter.vue'
-import IconSearchGlobal from 'vue-material-design-icons/CloudSearch.vue'
-import IconStar from 'vue-material-design-icons/Star.vue'
-
-const exampleItem = ['Mary', 'Patricia', 'James', 'Michael']
-
-export default {
-	components: {
-		IconAccount,
-		IconCalendarAccount,
-		IconFilter,
-		IconSearchGlobal,
-		IconStar,
-	},
-
-	data() {
-		return {
-			searchQuery: '',
-		}
-	},
-
-	computed: {
-		items() {
-			return exampleItem.filter((item) => item.toLocaleLowerCase().includes(this.searchQuery.toLocaleLowerCase()))
-		},
-	},
-}
-</script>
-<style scoped>
-/* This styles just mock NcContent and NcAppContent */
-.content-styleguidist {
-	position: relative !important;
-	margin: 0 !important;
-	/* prevent jumping */
-	min-height: 200px;
-}
-
-.content-styleguidist > * {
-	height: auto;
-}
-
-.fake-content {
-	padding: var(--app-navigation-padding);
-	padding-top: calc(2 * var(--app-navigation-padding) + var(--default-clickable-area));
-}
-
-.styleguide-wrapper {
-	background-color: var(--color-background-plain);
-	padding: var(--body-container-margin);
-}
-</style>
-```
-
 </docs>
 
 <template>
@@ -157,28 +46,21 @@ export default {
 			class="app-navigation__content"
 			:inert="!open || undefined"
 			@keydown.esc="handleEsc">
+			<div class="app-navigation__search">
+				<!-- @slot For in-app search you can pass a `NcAppNavigationSearch` component as the slot content. -->
+				<slot name="search" />
+			</div>
 			<div class="app-navigation__body" :class="{ 'app-navigation__body--no-list': !$scopedSlots.list }">
-				<NcAppNavigationSearch v-if="showSearch"
-					:label="searchLabel || undefined"
-					:no-inline-actions="noSearchInlineActions"
-					:value="search"
-					@update:value="$emit('update:search', $event)">
-					<template #actions>
-						<!-- @slot Optional actions, like NcActions or icon only buttons, to show next to the search input -->
-						<slot name="search-actions" />
-					</template>
-				</NcAppNavigationSearch>
-
-				<!-- The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->
+				<!-- @slot The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->
 				<slot />
 			</div>
 
 			<NcAppNavigationList v-if="$scopedSlots.list" class="app-navigation__list">
-				<!-- List for Navigation list items. Stretched between the main content and the footer -->
+				<!-- @slot List for Navigation list items. Stretched between the main content and the footer -->
 				<slot name="list" />
 			</NcAppNavigationList>
 
-			<!-- Footer for e.g. NcAppNavigationSettings -->
+			<!-- @slot Footer for e.g. NcAppNavigationSettings -->
 			<slot name="footer" />
 		</nav>
 		<NcAppNavigationToggle :open="open" @update:open="toggleNavigation" />
@@ -192,7 +74,6 @@ import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { createFocusTrap } from 'focus-trap'
 
 import NcAppNavigationList from '../NcAppNavigationList/index.js'
-import NcAppNavigationSearch from './NcAppNavigationSearch.vue'
 import NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'
 import Vue from 'vue'
 
@@ -201,7 +82,6 @@ export default {
 
 	components: {
 		NcAppNavigationList,
-		NcAppNavigationSearch,
 		NcAppNavigationToggle,
 	},
 
@@ -229,38 +109,6 @@ export default {
 			type: String,
 			default: '',
 		},
-
-		/**
-		 * If set an in-app search is shown as the first entry
-		 */
-		showSearch: {
-			type: Boolean,
-			default: false,
-		},
-
-		/**
-		 * The current search query
-		 */
-		search: {
-			type: String,
-			default: '',
-		},
-
-		/**
-		 * Label of in-app search input
-		 */
-		searchLabel: {
-			type: String,
-			default: null,
-		},
-
-		/**
-		 * Force a menu if there is more than one search action
-		 */
-		noSearchInlineActions: {
-			type: Boolean,
-			default: false,
-		},
 	},
 
 	setup() {
@@ -399,6 +247,14 @@ export default {
 		margin-left: calc(-1 * min($navigation-width, var(--app-navigation-max-width)));
 	}
 
+	&__search {
+		width: 100%;
+	}
+
+	&__body {
+		overflow-y: scroll;
+	}
+
 	// For legacy purposes support passing a bare list to the content in #default slot and including #footer slot
 	// Same styles as NcAppNavigationList
 	&__content > ul {
diff --git a/src/components/NcAppNavigation/NcAppNavigationSearch.vue b/src/components/NcAppNavigation/NcAppNavigationSearch.vue
deleted file mode 100644
index 501adfe476..0000000000
--- a/src/components/NcAppNavigation/NcAppNavigationSearch.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-<template>
-	<div class="app-navigation-search"
-		:class="{
-			'app-navigation-search--has-actions': hasActions(),
-		}">
-		<NcInputField ref="inputElement"
-			:aria-label="label"
-			class="app-navigation-search__input"
-			label-outside
-			:placeholder="label"
-			show-trailing-button
-			:trailing-button-label="t('Clear search')"
-			type="search"
-			:value="value"
-			@update:value="$emit('update:value', $event)"
-			@trailing-button-click="onCloseSearch">
-			<template #trailing-button-icon>
-				<IconClose :size="20" />
-			</template>
-		</NcInputField>
-		<Transition v-if="hasActions()" name="slide-fade">
-			<div v-show="showActions"
-				ref="actionsContainer"
-				class="app-navigation-search__actions">
-				<slot name="actions" />
-			</div>
-		</Transition>
-	</div>
-</template>
-
-<script setup>
-import { useFocusWithin } from '@vueuse/core'
-import { ref, nextTick, useSlots, watch } from 'vue'
-import { t } from '../../l10n.js'
-
-import IconClose from 'vue-material-design-icons/Close.vue'
-import NcInputField from '../NcInputField/NcInputField.vue'
-
-defineProps({
-	/**
-	 * Current search input
-	 */
-	value: {
-		type: String,
-		default: '',
-	},
-	/**
-	 * Text used to label the search input
-	 */
-	label: {
-		type: String,
-		default: t('Search in app…'),
-	},
-})
-
-const emit = defineEmits(['update:value'])
-const slots = useSlots()
-
-const inputElement = ref()
-const { focused: inputHasFocus } = useFocusWithin(inputElement)
-
-/**
- * @type {import('vue').Ref<import('vue').ComponentPublicInstance>}
- */
-const actionsContainer = ref()
-const hasActions = () => !!slots.actions
-const showActions = ref(true)
-watch(inputHasFocus, () => {
-	showActions.value = !inputHasFocus.value
-})
-
-/**
- * Handle close the search
- */
-function onCloseSearch() {
-	emit('update:value', '')
-	if (hasActions()) {
-		showActions.value = true
-		nextTick(() => actionsContainer.value.$el.querySelector('button')?.focus())
-	}
-}
-</script>
-
-<style scoped lang="scss">
-.app-navigation-search {
-	display: flex;
-	gap: var(--app-navigation-padding);
-	padding: var(--app-navigation-padding);
-
-	&--has-actions &__input {
-		flex-grow: 1;
-		z-index: 3;
-	}
-
-	&__actions {
-		display: flex;
-		gap: var(--default-grid-baseline);
-
-		margin-inline-start: 0;
-		max-width: calc(2 * var(--default-clickable-area) + var(--default-grid-baseline));
-		max-height: var(--default-clickable-area);
-	}
-
-	&__input {
-		// This is a fallback for legacy version (Nextcloud 29 and older) so that we keep the pill like design there
-		--input-border-radius: var(--border-radius-element, var(--border-radius-pill)) !important;
-	}
-}
-
-.slide-fade-enter-active,
-.slide-fade-leave-active {
-	transition: margin-inline-start var(--animation-quick);
-}
-
-.slide-fade-enter,
-.slide-fade-leave-to {
-	margin-inline-start: calc(-1 * var(--default-clickable-area));
-}
-</style>
diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
index 006ceedb29..7332052df1 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
@@ -5,9 +5,9 @@
 
 <docs>
 
-# Usage
+### Usage
 
-### Simple element
+#### Simple element
 
 * With an icon:
 
@@ -46,7 +46,7 @@
 </ul>
 ```
 
-### Element with actions
+#### Element with actions
 Wrap the children in a template. If you have more than 2 actions, a popover menu and a menu
 button will be automatically created.
 
@@ -98,7 +98,7 @@ button will be automatically created.
 	</script>
 ```
 
-### Element with counter
+#### Element with counter
 Just nest the counter in a template within `<NcAppNavigationItem>` and add `#counter` to it.
 
 ```vue
@@ -127,7 +127,7 @@ Just nest the counter in a template within `<NcAppNavigationItem>` and add `#cou
 	</script>
 ```
 
-### Element with children
+#### Element with children
 
 Wrap the children in a template with the `slot` property and use the prop `allowCollapse` to choose wether to allow or
 prevent the user from collapsing the items.
@@ -189,7 +189,7 @@ prevent the user from collapsing the items.
 	</script>
 ```
 
-### Editable element
+#### Editable element
 Add the prop `:editable=true` and an edit placeholder if you need it. By default
 the placeholder is the previous name of the element.
 
@@ -215,7 +215,7 @@ the placeholder is the previous name of the element.
 	</script>
 ```
 
-### Undo element
+#### Undo element
 Just set the `undo` and `name` props. When clicking the undo button, an `undo` event is emitted.
 
 ```
@@ -224,7 +224,7 @@ Just set the `undo` and `name` props. When clicking the undo button, an `undo` e
 </ul>
 ```
 
-### Link element
+#### Link element
 Href that start by http will be treated as external and opened in a new tab
 ```
 <div>
@@ -235,14 +235,14 @@ Href that start by http will be treated as external and opened in a new tab
 </div>
 ```
 
-### Custom title
+#### Custom title
 ```
 <ul>
 	<NcAppNavigationItem name="Nextcloud" title="Open the Nextcloud website" href="https://nextcloud.com" />
 </ul>
 ```
 
-### Pinned element
+#### Pinned element
 Just set the `pinned` prop.
 ```
 <ul>
diff --git a/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue b/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
index 6b3f455dda..088d7ee9dc 100644
--- a/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
+++ b/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
@@ -4,9 +4,9 @@
 -->
 
 <docs>
-# Usage
+### Usage
 
-### New Item element
+#### New Item element
 ```vue
 	<template>
 		<NcAppNavigationNewItem name="New Item" @new-item="function(value){alert(value)}">
@@ -26,7 +26,7 @@
 	</script>
 ```
 
-### New Item element with a loading animation instead of the icon
+#### New Item element with a loading animation instead of the icon
 ```vue
 	<template>
 		<NcAppNavigationNewItem name="New Item" :loading="true">
diff --git a/src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue b/src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue
new file mode 100644
index 0000000000..07f419444b
--- /dev/null
+++ b/src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue
@@ -0,0 +1,272 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<docs>
+### Usage
+
+```vue
+<template>
+	<div class="styleguide-wrapper">
+		<NcContent app-name="styleguide-app-navigation" class="content-styleguidist">
+			<NcAppNavigation>
+				<template #search>
+					<NcAppNavigationSearch v-model="searchQuery">
+						<template #actions>
+							<NcActions aria-label="Filters">
+								<template #icon>
+									<IconFilter :size="20" />
+								</template>
+								<NcActionButton>
+									<template #icon>
+										<IconAccount :size="20" />
+									</template>
+									Filter by name
+								</NcActionButton>
+								<NcActionButton>
+									<template #icon>
+										<IconCalendarAccount :size="20" />
+									</template>
+									Filter by year
+								</NcActionButton>
+							</NcActions>
+							<NcButton aria-label="Search globally" type="tertiary">
+								<template #icon>
+									<IconSearchGlobal :size="20" />
+								</template>
+							</NcButton>
+						</template>
+					</NcAppNavigationSearch>
+				</template>
+				<template #list>
+					<NcAppNavigationItem name="First navigation entry">
+						<template #icon>
+							<IconStar :size="20" />
+						</template>
+					</NcAppNavigationItem>
+					<NcAppNavigationItem name="Second navigation entry">
+						<template #icon>
+							<IconStar :size="20" />
+						</template>
+					</NcAppNavigationItem>
+				</template>
+			</NcAppNavigation>
+			<NcAppContent>
+				<ul class="fake-content">
+					<li>Search query: {{ searchQuery }}</li>
+					<li v-for="(item, index) in items" :key="index">
+						{{ item }}
+					</li>
+				</ul>
+			</NcAppContent>
+		</NcContent>
+	</div>
+</template>
+<script>
+import IconAccount from 'vue-material-design-icons/Account.vue'
+import IconCalendarAccount from 'vue-material-design-icons/CalendarAccount.vue'
+import IconFilter from 'vue-material-design-icons/Filter.vue'
+import IconSearchGlobal from 'vue-material-design-icons/CloudSearch.vue'
+import IconStar from 'vue-material-design-icons/Star.vue'
+
+const exampleItem = ['Mary', 'Patricia', 'James', 'Michael']
+
+export default {
+	components: {
+		IconAccount,
+		IconCalendarAccount,
+		IconFilter,
+		IconSearchGlobal,
+		IconStar,
+	},
+
+	data() {
+		return {
+			searchQuery: '',
+		}
+	},
+
+	computed: {
+		items() {
+			return exampleItem.filter((item) => item.toLocaleLowerCase().includes(this.searchQuery.toLocaleLowerCase()))
+		},
+	},
+}
+</script>
+<style scoped>
+/* This styles just mock NcContent and NcAppContent */
+.content-styleguidist {
+	position: relative !important;
+	margin: 0 !important;
+	/* prevent jumping */
+	min-height: 200px;
+}
+
+.content-styleguidist > * {
+	height: auto;
+}
+
+.fake-content {
+	padding: var(--app-navigation-padding);
+	padding-top: calc(2 * var(--app-navigation-padding) + var(--default-clickable-area));
+}
+
+.styleguide-wrapper {
+	background-color: var(--color-background-plain);
+	padding: var(--body-container-margin);
+}
+</style>
+```
+</docs>
+<template>
+	<div class="app-navigation-search"
+		:class="{
+			'app-navigation-search--has-actions': hasActions(),
+		}">
+		<NcInputField ref="inputElement"
+			:aria-label="label"
+			class="app-navigation-search__input"
+			label-outside
+			:placeholder="placeholder ?? label"
+			show-trailing-button
+			:trailing-button-label="t('Clear search')"
+			type="search"
+			:value="modelValue"
+			@update:value="$emit('update:modelValue', $event)"
+			@trailing-button-click="onCloseSearch">
+			<template #trailing-button-icon>
+				<IconClose :size="20" />
+			</template>
+		</NcInputField>
+		<div v-if="hasActions()"
+			ref="actionsContainer"
+			class="app-navigation-search__actions"
+			:class="{
+				'app-navigation-search__actions--hidden': !showActions,
+				'hidden-visually': hideActions,
+			}">
+			<slot name="actions" />
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { useFocusWithin } from '@vueuse/core'
+import { ref, nextTick, useSlots, watch } from 'vue'
+import { t } from '../../l10n.js'
+
+import IconClose from 'vue-material-design-icons/Close.vue'
+import NcInputField from '../NcInputField/NcInputField.vue'
+
+defineProps({
+	/**
+	 * Current search input
+	 */
+	modelValue: {
+		type: String,
+		default: '',
+	},
+	/**
+	 * Text used to label the search input
+	 */
+	label: {
+		type: String,
+		default: t('Search…'),
+	},
+
+	/**
+	 * Placeholder of the search input
+	 * By default the value of `label` is used.
+	 */
+	placeholder: {
+		type: String,
+		default: null,
+	},
+})
+
+const emit = defineEmits(['update:modelValue'])
+const slots = useSlots()
+
+const inputElement = ref()
+const { focused: inputHasFocus } = useFocusWithin(inputElement)
+
+/** Timeout used to define when the search input is fully expanded */
+const transitionTimeout = Number.parseInt(window.getComputedStyle(window.document.body).getPropertyValue('--animation-quick')) || 100
+
+/**
+ * @type {import('vue').Ref<import('vue').ComponentPublicInstance>}
+ */
+const actionsContainer = ref()
+const hasActions = () => !!slots.actions
+const showActions = ref(true)
+const timeoutId = ref()
+/** This is used to hide the actions after the transition is done */
+const hideActions = ref(false)
+watch(inputHasFocus, () => {
+	showActions.value = !inputHasFocus.value
+	window.clearTimeout(timeoutId.value)
+	if (showActions.value) {
+		hideActions.value = false
+	} else {
+		// If the transition is done, we fully hide the actions visually
+		window.setTimeout(() => {
+			hideActions.value = !showActions.value
+		}, transitionTimeout)
+	}
+})
+
+/**
+ * Handle close the search
+ */
+function onCloseSearch() {
+	emit('update:modelValue', '')
+	if (hasActions()) {
+		showActions.value = true
+		nextTick(() => actionsContainer.value.$el.querySelector('button')?.focus())
+	}
+}
+</script>
+
+<script>
+export default {
+	name: 'NcAppNavigationSearch',
+	model: {
+		event: 'update:modelValue',
+		prop: 'modelValue',
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.app-navigation-search {
+	display: flex;
+	gap: var(--app-navigation-padding);
+	padding: var(--app-navigation-padding);
+
+	&--has-actions &__input {
+		flex-grow: 1;
+		z-index: 3;
+	}
+
+	&__actions {
+		display: flex;
+		gap: var(--default-grid-baseline);
+
+		margin-inline-start: 0;
+		max-width: calc(2 * var(--default-clickable-area) + var(--default-grid-baseline));
+		max-height: var(--default-clickable-area);
+
+		transition: margin-inline-start var(--animation-quick);
+
+		&--hidden {
+			margin-inline-start: calc(-1 * var(--default-clickable-area));
+		}
+	}
+
+	&__input {
+		// This is a fallback for legacy version (Nextcloud 29 and older) so that we keep the pill like design there
+		--input-border-radius: var(--border-radius-element, var(--border-radius-pill)) !important;
+	}
+}
+</style>
diff --git a/src/components/NcAppNavigationSearch/index.js b/src/components/NcAppNavigationSearch/index.js
new file mode 100644
index 0000000000..b60247b1c1
--- /dev/null
+++ b/src/components/NcAppNavigationSearch/index.js
@@ -0,0 +1,6 @@
+/*!
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export { default } from './NcAppNavigationSearch.vue'
diff --git a/src/components/index.js b/src/components/index.js
index 3c92e56283..1c9d8f35b0 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -25,6 +25,7 @@ export { default as NcAppNavigationItem } from './NcAppNavigationItem/index.js'
 export { default as NcAppNavigationList } from './NcAppNavigationList/index.js'
 export { default as NcAppNavigationNew } from './NcAppNavigationNew/index.js'
 export { default as NcAppNavigationNewItem } from './NcAppNavigationNewItem/index.js'
+export { default as NcAppNavigationSearch } from './NcAppNavigationSearch/index.js'
 export { default as NcAppNavigationSettings } from './NcAppNavigationSettings/index.js'
 export { default as NcAppNavigationSpacer } from './NcAppNavigationSpacer/index.js'
 export { default as NcAppSettingsDialog } from './NcAppSettingsDialog/index.js'
diff --git a/styleguide.config.js b/styleguide.config.js
index efec115b87..8113ead5cf 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -186,7 +186,6 @@ module.exports = async () => {
 									'src/components/NcAppNavigation*/*.vue',
 								],
 								ignore: [
-									'src/components/NcAppNavigation/NcAppNavigationSearch.vue',
 									'src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue',
 									'src/components/NcAppNavigationItem/NcInputConfirmCancel.vue',
 								],