feat(NcAppNavigationItem): use exact route matching

src/components/NcAppNavigationItem/NcAppNavigationItem.vue

@@ -315,20 +315,20 @@
 		class="app-navigation-entry-wrapper">
 		<component
 			:is="isRouterLink ? 'router-link' : 'NcVNodes'"
-			v-slot="{ href: routerLinkHref, navigate, isActive }"
+			v-slot="{ href: routerLinkHref, navigate, isExactActive }"
 			v-bind="{ ...isRouterLink && { custom: true, to } }">
 			<div
 				class="app-navigation-entry"
 				:class="{
 					'app-navigation-entry--editing': editingActive,
 					'app-navigation-entry--deleted': undo,
-					active: (to && isActive) || active,
+					active: isActiveLink(isExactActive),
 				}">
 				<!-- Icon and name -->
 				<a
 					v-if="!undo"
 					class="app-navigation-entry-link"
-					:aria-current="active || (to && isActive) ? 'page' : undefined"
+					:aria-current="isActiveLink(isExactActive) ? 'page' : undefined"
 					:aria-description="ariaDescription"
 					:aria-expanded="!!$slots.default ? opened.toString() : undefined"
 					:href="href || routerLinkHref || '#'"
@@ -346,7 +346,7 @@
 						:class="{ [icon]: icon }">
 						<NcLoadingIcon v-if="loading" />
 						<!-- @slot Slot for the optional leading icon. This slots get the `active`-slot attribute passed which is based on the vue-routers active route or the `active` prop. -->
-						<slot v-else name="icon" :active="active || (to && isActive)" />
+						<slot v-else name="icon" :active="isActiveLink(isExactActive)" />
 					</div>
 					<span class="app-navigation-entry__name" :class="{ 'hidden-visually': editingActive }">
 						{{ name }}
@@ -356,7 +356,7 @@
 							ref="editingInput"
 							v-model="editingValue"
 							:placeholder="editPlaceholder !== '' ? editPlaceholder : name"
-							:primary="(to && isActive) || active"
+							:primary="isActiveLink(isExactActive)"
 							@cancel="cancelEditing"
 							@confirm="handleEditingDone" />
 					</div>
@@ -391,7 +391,7 @@
 						:open="menuOpen"
 						:force-menu="forceMenu"
 						:default-icon="menuIcon"
-						:variant="(to && isActive) || active ? 'tertiary-on-primary' : 'tertiary'"
+						:variant="isActiveLink(isExactActive) ? 'tertiary-on-primary' : 'tertiary'"
 						@update:open="onMenuToggle">
 						<template #icon>
 							<!-- @slot Slot for the custom menu icon -->
@@ -420,7 +420,7 @@
 				</div>
 				<NcAppNavigationIconCollapsible
 					v-if="allowCollapse && !!$slots.default"
-					:active="(to && isActive) || active"
+					:active="isActiveLink(isExactActive)"
 					:open="opened"
 					@click.prevent.stop="toggleCollapse" />
 
@@ -465,12 +465,13 @@
 
 	props: {
 		/**
-		 * If you are not using vue-router you can use the property to set this item as the active navigation entry.
+		 * If you are not using vue-router or if you want to overwrite the vue-router active state,
+		 * you can use the property to set the active state of the navigation entry.
 		 * When using vue-router and the `to` property this is set automatically.
 		 */
 		active: {
-			type: Boolean,
-			default: false,
+			type: [Boolean, undefined],
+			default: undefined,
 		},
 
 		/**
@@ -731,7 +732,7 @@
 		 * Handle link click
 		 *
 		 * @param {PointerEvent} event - Native click event
 		 * @param {Function} [navigate] - VueRouter link's navigate if any
 		 * @param {string} [routerLinkHref] - VueRouter link's href
 		 */
 		onClick(event, navigate, routerLinkHref) {
@@ -814,6 +815,21 @@
 			// Match any protocol
 			return href && href.match(/[a-z]+:\/\//i)
 		},
+
+		/**
+		 * Determines whether the navigation item should be marked as active.
+		 *
+		 * When the `active` prop is set, it is used instead of the router active state
+		 *
+		 * @param {boolean} isExactActive - The router-provided active state for exact matches
+		 * @return {boolean} True if the navigation item should be rendered in active state
+		 */
+		isActiveLink(isExactActive) {
+			if (this.active !== undefined) {
+				return this.active
+			}
+			return isExactActive
+		},
 	},
 }
 </script>