From 6ba90c412261bb1945595c52d70150d19dfc7f16 Mon Sep 17 00:00:00 2001
From: "Jan C. Borchardt" <925062+jancborchardt@users.noreply.github.com>
Date: Mon, 13 Jul 2026 21:54:40 +0200
Subject: [PATCH] fix(NcAppNavigationItem): close mobile navigation on
 router-link click, fix #2523

Assisted-by: ClaudeCode:claude-opus-4-8
Signed-off-by: Jan C. Borchardt <925062+jancborchardt@users.noreply.github.com>
---
 .../NcAppNavigationItem.vue                   |  5 +++
 .../NcAppNavigationItem.spec.ts               | 38 +++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 tests/unit/components/NcAppNavigation/NcAppNavigationItem.spec.ts

diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
index 9dcce9c349..90b34985b0 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
@@ -418,6 +418,7 @@ Just set the `pinned` prop.
 </template>
 
 <script>
+import { emit } from '@nextcloud/event-bus'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Undo from 'vue-material-design-icons/Undo.vue'
 import NcAppNavigationIconCollapsible from './NcAppNavigationIconCollapsible.vue'
@@ -744,6 +745,10 @@ export default {
 			if (routerLinkHref) {
 				navigate?.(event)
 				event.preventDefault()
+				// On mobile, close app-navigation when navigating so it doesn't overlay content
+				if (this.isMobile) {
+					emit('toggle-navigation', { open: false })
+				}
 			}
 		},
 
diff --git a/tests/unit/components/NcAppNavigation/NcAppNavigationItem.spec.ts b/tests/unit/components/NcAppNavigation/NcAppNavigationItem.spec.ts
new file mode 100644
index 0000000000..53e3c93b9c
--- /dev/null
+++ b/tests/unit/components/NcAppNavigation/NcAppNavigationItem.spec.ts
@@ -0,0 +1,38 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import NcAppNavigationItem from '../../../../src/components/NcAppNavigationItem/NcAppNavigationItem.vue'
+import { resizeWindowWidth } from '../../testing-utils.ts'
+
+describe('NcAppNavigationItem.vue', () => {
+	describe('router-link navigation on mobile', () => {
+		it('closes the app navigation after navigating', async () => {
+			await resizeWindowWidth(500)
+			const wrapper = mount(NcAppNavigationItem, { props: { name: 'Item' } })
+			const handler = vi.fn()
+			subscribe('toggle-navigation', handler)
+
+			wrapper.vm.onClick(new MouseEvent('click'), vi.fn(), '/href')
+
+			expect(handler).toHaveBeenCalledWith({ open: false })
+			unsubscribe('toggle-navigation', handler)
+		})
+
+		it('does not close the app navigation on desktop', async () => {
+			await resizeWindowWidth(1024)
+			const wrapper = mount(NcAppNavigationItem, { props: { name: 'Item' } })
+			const handler = vi.fn()
+			subscribe('toggle-navigation', handler)
+
+			wrapper.vm.onClick(new MouseEvent('click'), vi.fn(), '/href')
+
+			expect(handler).not.toHaveBeenCalled()
+			unsubscribe('toggle-navigation', handler)
+		})
+	})
+})