diff --git a/l10n/messages.pot b/l10n/messages.pot
index 59eba91aa8..f45235049d 100644
--- a/l10n/messages.pot
+++ b/l10n/messages.pot
@@ -332,6 +332,9 @@ msgstr ""
msgid "Search for time zone"
msgstr ""
+msgid "Search in app…"
+msgstr ""
+
msgid "Search results"
msgstr ""
diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
index c877060531..b150bd0023 100644
--- a/src/components/NcAppNavigation/NcAppNavigation.vue
+++ b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -33,6 +33,103 @@ emit('toggle-navigation', {
})
```
+#### With in-app search
+
+```vue
+
+
+
+
+
+
+
+
+
+ Filter
+
+
+
+
+
+ Search globally
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Search query: {{ searchQuery }}
+ -
+ {{ item }}
+
+
+
+
+
+
+
+
+```
+
@@ -47,6 +144,17 @@ emit('toggle-navigation', {
:inert="!open || undefined"
@keydown.esc="handleEsc">
+
+
+
+
+
+
+
@@ -69,8 +177,9 @@ import { getTrapStack } from '../../utils/focusTrap.js'
import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
import { createFocusTrap } from 'focus-trap'
-import NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'
import NcAppNavigationList from '../NcAppNavigationList/index.js'
+import NcAppNavigationSearch from './NcAppNavigationSearch.vue'
+import NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'
import Vue from 'vue'
export default {
@@ -78,6 +187,7 @@ export default {
components: {
NcAppNavigationList,
+ NcAppNavigationSearch,
NcAppNavigationToggle,
},
@@ -105,6 +215,38 @@ 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() {
diff --git a/src/components/NcAppNavigation/NcAppNavigationSearch.vue b/src/components/NcAppNavigation/NcAppNavigationSearch.vue
new file mode 100644
index 0000000000..5f69ce76fd
--- /dev/null
+++ b/src/components/NcAppNavigation/NcAppNavigationSearch.vue
@@ -0,0 +1,126 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/styleguide.config.js b/styleguide.config.js
index 8113ead5cf..efec115b87 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -186,6 +186,7 @@ module.exports = async () => {
'src/components/NcAppNavigation*/*.vue',
],
ignore: [
+ 'src/components/NcAppNavigation/NcAppNavigationSearch.vue',
'src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue',
'src/components/NcAppNavigationItem/NcInputConfirmCancel.vue',
],