Highlight the current list when something list related is called

src/App.vue

@@ -141,7 +141,7 @@
 								<div class="more-container" :key="n.id + 'child'">
 									<ul class="menu-list can-be-hidden" >
 										<li v-for="l in n.lists" :key="l.id">
-											<router-link :to="{ name: 'list.index', params: { listId: l.id} }">
+											<router-link :to="{ name: 'list.index', params: { listId: l.id} }" :class="{'router-link-exact-active': currentList === l.id}">
 												<span class="name">
 													<span class="color-bubble" v-if="l.hexColor !== ''" :style="{ backgroundColor: l.hexColor }"></span>
 													{{l.title}}
@@ -223,7 +223,7 @@
 	import swEvents from './ServiceWorker/events'
 	import Notification from './components/global/notification'
 	import Fancycheckbox from './components/global/fancycheckbox'
-	import {IS_FULLPAGE, ONLINE} from './store/mutation-types'
+	import {CURRENT_LIST, IS_FULLPAGE, ONLINE} from './store/mutation-types'
 
 	export default {
 		name: 'app',
@@ -302,6 +302,7 @@
 			namespaces(state) {
 				return state.namespaces.namespaces.filter(n => this.showArchived ? true : !n.isArchived)
 			},
+			currentList: CURRENT_LIST,
 		}),
 		methods: {
 			logout() {
@@ -320,6 +321,21 @@
 				this.loadNamespacesIfNeeded(e)
 				this.mobileMenuActive = false
 				this.userMenuActive = false
+
+				// Reset the current list highlight in menu if the current list is not list related.
+				if (
+					this.$route.name === 'home' ||
+					this.$route.name === 'editNamespace' ||
+					this.$route.name === 'listTeams' ||
+					this.$route.name === 'editTeam' ||
+					this.$route.name === 'showTasksInRange' ||
+					this.$route.name === 'listLabels' ||
+					this.$route.name === 'migrateStart' ||
+					this.$route.name === 'migrate.wunderlist' ||
+					this.$route.name === 'userSettings'
+				) {
+					this.$store.commit(CURRENT_LIST, 0)
+				}
 			},
 			showRefreshUI(e) {
 				console.log('recieved refresh event', e)

src/components/lists/ShowList.vue

@@ -26,6 +26,7 @@
 
 	import ListModel from '../../models/list'
 	import ListService from '../../services/list'
+	import {CURRENT_LIST} from "../../store/mutation-types";
 
 	export default {
 		data() {
@@ -65,6 +66,8 @@
 					return
 				}
 
+				this.$store.commit(CURRENT_LIST, Number(this.$route.params.listId))
+
 				// We create an extra list object instead of creating it in this.list because that would trigger a ui update which would result in bad ux.
 				let list = new ListModel({id: this.$route.params.listId})
 				this.listService.get(list)

src/store/index.js

@@ -5,7 +5,7 @@ Vue.use(Vuex)
 import config from './modules/config'
 import auth from './modules/auth'
 import namespaces from './modules/namespaces'
-import {ERROR_MESSAGE, IS_FULLPAGE, LOADING, ONLINE} from './mutation-types'
+import {CURRENT_LIST, ERROR_MESSAGE, IS_FULLPAGE, LOADING, ONLINE} from './mutation-types'
 
 export const store = new Vuex.Store({
 	modules: {
@@ -18,6 +18,8 @@ export const store = new Vuex.Store({
 		errorMessage: '',
 		online: true,
 		isFullpage: false,
+		// This is used to highlight the current list in menu for all list related views
+		currentList: 0,
 	},
 	mutations: {
 		[LOADING](state, loading) {
@@ -31,6 +33,9 @@ export const store = new Vuex.Store({
 		},
 		[IS_FULLPAGE](state, fullpage) {
 			state.isFullpage = fullpage
-		}
+		},
+		[CURRENT_LIST](state, currentList) {
+			state.currentList = currentList
+		},
 	},
 })

src/store/mutation-types.js

@@ -2,6 +2,7 @@ export const LOADING = 'loading'
 export const ERROR_MESSAGE = 'errorMessage'
 export const ONLINE = 'online'
 export const IS_FULLPAGE = 'isFullpage'
+export const CURRENT_LIST = 'currentList'
 
 export const CONFIG = 'config'
 export const AUTH = 'auth'

src/styles/theme/navigation.scss

@@ -237,7 +237,7 @@
             padding-right: 0.5em;
           }
 
-          &.router-link-active {
+          &.router-link-exact-active {
             color: $primary;
             border-left: $vikunja-nav-selected-width solid darken($primary, 5%);
             .icon {