diff --git a/l10n/messages.pot b/l10n/messages.pot
index 59eba91aa8..40580f46cc 100644
--- a/l10n/messages.pot
+++ b/l10n/messages.pot
@@ -335,6 +335,9 @@ msgstr ""
msgid "Search results"
msgstr ""
+msgid "Search…"
+msgstr ""
+
#. FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
msgid "sec. ago"
msgstr ""
diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
index c877060531..c1ef3db15c 100644
--- a/src/components/NcAppNavigation/NcAppNavigation.vue
+++ b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -46,17 +46,21 @@ emit('toggle-navigation', {
class="app-navigation__content"
:inert="!open || undefined"
@keydown.esc="handleEsc">
+
+
+
+
-
+
-
+
-
+
@@ -69,8 +73,8 @@ 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 NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'
import Vue from 'vue'
export default {
@@ -159,7 +163,7 @@ export default {
* @param {boolean} [state] set the state instead of inverting the current one
*/
toggleNavigation(state) {
- // Early return if alreay in that state
+ // Early return if already in that state
if (this.open === state) {
emit('navigation-toggled', {
open: this.open,
@@ -206,7 +210,7 @@ export default {
@@ -243,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/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 @@
-# Usage
+### Usage
-### Simple element
+#### Simple element
* With an icon:
@@ -46,7 +46,7 @@
```
-### 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.
```
-### Element with counter
+#### Element with counter
Just nest the counter in a template within `` and add `#counter` to it.
```vue
@@ -127,7 +127,7 @@ Just nest the counter in a template within `` and add `#cou
```
-### 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.
```
-### 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.
```
-### 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
```
-### Link element
+#### Link element
Href that start by http will be treated as external and opened in a new tab
```
@@ -235,14 +235,14 @@ Href that start by http will be treated as external and opened in a new tab
```
-### Custom title
+#### Custom title
```
```
-### Pinned element
+#### Pinned element
Just set the `pinned` prop.
```
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 @@
-->
-# Usage
+### Usage
-### New Item element
+#### New Item element
```vue
@@ -26,7 +26,7 @@
```
-### New Item element with a loading animation instead of the icon
+#### New Item element with a loading animation instead of the icon
```vue
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 @@
+
+
+
+### Usage
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Filter by name
+
+
+
+
+
+ Filter by year
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Search query: {{ searchQuery }}
+ -
+ {{ item }}
+
+
+
+
+
+
+
+
+```
+
+
+
+
+
+
+
+
+
+
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'