feat(RootNavigation): fill active icons

Signed-off-by: Grigory Vodyanov <[email protected]>

Author: GVodyanov

src/components/AppNavigation/GroupNavigationItem.vue

@@ -14,9 +14,11 @@
 		<AppNavigationItem
 			:key="group.key"
 			:to="group.router"
-			:name="group.name">
+			:name="group.name"
+			@click="$emit('updateRouteState', `group:${group.id}`)">
 			<template #icon>
-				<IconContact :size="20" />
+				<IconContactFilled v-if="routeState === `group:${group.id}`" :size="20" />
+				<IconContact v-else :size="20" />
 			</template>
 			<template #actions>
 				<ActionButton
@@ -87,6 +89,7 @@ import {
 } from '@nextcloud/vue'
 import download from 'downloadjs'
 import moment from 'moment'
+import IconContactFilled from 'vue-material-design-icons/AccountMultiple.vue'
 import IconContact from 'vue-material-design-icons/AccountMultipleOutline.vue'
 import IconEmail from 'vue-material-design-icons/EmailOutline.vue'
 import IconRename from 'vue-material-design-icons/FolderEditOutline.vue'
@@ -111,13 +114,18 @@ export default {
 		IconRename,
 		IconDelete,
 		IconLoading,
+		IconContactFilled,
 	},
 
 	props: {
 		group: {
 			type: Object,
 			required: true,
 		},
+		routeState: {
+			type: String,
+			required: true,
+		},
 	},
 
 	data() {

src/components/AppNavigation/RootNavigation.vue

@@ -24,9 +24,11 @@
 				:to="{
 					name: 'group',
 					params: { selectedGroup: GROUP_ALL_CONTACTS },
-				}">
+				}"
+				@click="updateRouteState('all')">
 				<template #icon>
-					<IconContact :size="20" />
+					<IconContactFilled v-if="routeState === 'all'" :size="20" />
+					<IconContact v-else :size="20" />
 				</template>
 				<template #counter>
 					<NcCounterBubble
@@ -44,7 +46,8 @@
 					name: 'chart',
 					params: { selectedChart: GROUP_ALL_CONTACTS },
 				}"
-				icon="icon-category-monitoring" />
+				icon="icon-category-monitoring"
+				@click="updateRouteState('orgchart')" />
 
 			<!-- Not grouped group -->
 			<AppNavigationItem
@@ -54,9 +57,11 @@
 				:to="{
 					name: 'group',
 					params: { selectedGroup: GROUP_NO_GROUP_CONTACTS },
-				}">
+				}"
+				@click="updateRouteState('notgrouped')">
 				<template #icon>
-					<IconUser :size="20" />
+					<IconUserFilled v-if="routeState === 'notgrouped'" :size="20" />
+					<IconUser v-else :size="20" />
 				</template>
 				<template #counter>
 					<NcCounterBubble
@@ -73,7 +78,8 @@
 				:to="{
 					name: 'group',
 					params: { selectedGroup: GROUP_RECENTLY_CONTACTED },
-				}">
+				}"
+				@click="updateRouteState('recentlycontacted')">
 				<template #icon>
 					<IconRecentlyContacted :size="20" />
 				</template>
@@ -113,7 +119,9 @@
 			<GroupNavigationItem
 				v-for="group in ellipsisGroupsMenu"
 				:key="group.key"
-				:group="group" />
+				:route-state="routeState"
+				:group="group"
+				@update-route-state="updateRouteState" />
 
 			<template v-if="isCirclesEnabled">
 				<!-- Toggle groups ellipsis -->
@@ -198,6 +206,8 @@ import {
 } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import naturalCompare from 'string-natural-compare'
+import IconUserFilled from 'vue-material-design-icons/Account.vue'
+import IconContactFilled from 'vue-material-design-icons/AccountMultiple.vue'
 import IconContact from 'vue-material-design-icons/AccountMultipleOutline.vue'
 import IconUser from 'vue-material-design-icons/AccountOutline.vue'
 import IconError from 'vue-material-design-icons/AlertCircleOutline.vue'
@@ -230,7 +240,9 @@ export default {
 		ContactsSettings,
 		GroupNavigationItem,
 		IconContact,
+		IconContactFilled,
 		IconUser,
+		IconUserFilled,
 		IconAdd,
 		IconError,
 		IconLoading,
@@ -243,12 +255,7 @@ export default {
 	props: {
 		loading: {
 			type: Boolean,
-			default: true,
-		},
-
-		contactsList: {
-			type: Array,
-			required: true,
+			default: false,
 		},
 	},
 
@@ -278,6 +285,8 @@ export default {
 			collapsedCircles: true,
 
 			showSettings: false,
+
+			routeState: 'all',
 		}
 	},
 
@@ -493,6 +502,10 @@ export default {
 		showContactsSettings() {
 			this.showSettings = true
 		},
+
+		updateRouteState(state) {
+			this.routeState = state
+		},
 	},
 }
 </script>