feat(NcAppNavigationItem): use exact route matching and change active prop to be able to overwrite the vue-router state

Signed-off-by: Wolfgang <github@linux-dude.de>

Author: wofferl

src/components/NcAppNavigationItem/NcAppNavigationItem.vue

@@ -315,20 +315,20 @@ Just set the `pinned` prop.
 		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 @@ Just set the `pinned` prop.
 						: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 @@ Just set the `pinned` prop.
 							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 @@ Just set the `pinned` prop.
 						: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 @@ Just set the `pinned` prop.
 				</div>
 				<NcAppNavigationIconCollapsible
 					v-if="allowCollapse && !!$slots.default"
-					:active="(to && isActive) || active"
+					:active="isActiveLink(isExactActive)"
 					:open="opened"
 					@click.prevent.stop="toggleCollapse" />
 
@@ -465,12 +465,13 @@ export default {
 
 	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,
+			default: undefined,
 		},
 
 		/**
@@ -814,6 +815,21 @@ export default {
 			// 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>