Persist collections nav group state

Fixes #929

app/src/components/v-detail/v-detail.vue

@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import { defineComponent, computed, ref } from '@vue/composition-api';
-import { i18n } from '@/lang';
+import { i18n } from '../../lang';
 
 export default defineComponent({
 	model: {
@@ -38,7 +38,7 @@ export default defineComponent({
 		disabled: {
 			type: Boolean,
 			default: false,
-		}
+		},
 	},
 
 	setup(props, { emit }) {
@@ -69,6 +69,7 @@ export default defineComponent({
 
 .v-detail:not(.disabled) .v-divider:hover {
 	--v-divider-label-color: var(--foreground-normal);
+
 	cursor: pointer;
 }
 

app/src/modules/collections/components/navigation.vue

@@ -16,11 +16,12 @@
 				</template>
 				<template v-else>
 					<v-detail
-						:active="group.accordion === 'always_open' || undefined"
+						:active="group.accordion === 'always_open' || isActive(group.name)"
 						:disabled="group.accordion === 'always_open'"
 						:start-open="group.accordion === 'start_open'"
 						:label="group.name || null"
 						:key="group.name"
+						@toggle="toggleActive(group.name)"
 					>
 						<v-list-item :exact="exact" v-for="navItem in group.items" :key="navItem.to" :to="navItem.to">
 							<v-list-item-icon><v-icon :name="navItem.icon" /></v-list-item-icon>
@@ -56,7 +57,7 @@
 <script lang="ts">
 import { defineComponent, computed } from '@vue/composition-api';
 import useNavigation from '../composables/use-navigation';
-import { usePresetsStore, useUserStore } from '@/stores/';
+import { usePresetsStore, useUserStore } from '../../../stores/';
 import { orderBy } from 'lodash';
 import NavigationBookmark from './navigation-bookmark.vue';
 
@@ -70,7 +71,7 @@ export default defineComponent({
 	},
 	setup() {
 		const presetsStore = usePresetsStore();
-		const { customNavItems, navItems } = useNavigation();
+		const { customNavItems, navItems, activeGroups } = useNavigation();
 		const userStore = useUserStore();
 		const isAdmin = computed(() => userStore.state.currentUser?.role.admin_access === true);
 
@@ -96,7 +97,19 @@ export default defineComponent({
 			);
 		});
 
-		return { navItems, bookmarks, customNavItems, isAdmin };
+		return { navItems, bookmarks, customNavItems, isAdmin, activeGroups, isActive, toggleActive };
+
+		function isActive(name: string) {
+			return activeGroups.value.includes(name);
+		}
+
+		function toggleActive(name: string) {
+			if (activeGroups.value.includes(name)) {
+				activeGroups.value = activeGroups.value.filter((current: string) => current !== name);
+			} else {
+				activeGroups.value.push(name);
+			}
+		}
 	},
 });
 </script>

app/src/modules/collections/composables/use-navigation.ts

@@ -1,4 +1,4 @@
-import { computed } from '@vue/composition-api';
+import { computed, Ref, ref } from '@vue/composition-api';
 
 import { useCollectionsStore, useUserStore } from '@/stores/';
 import { Collection } from '@/types';
@@ -18,7 +18,11 @@ export type NavItemGroup = {
 	items: NavItem[];
 };
 
+let activeGroups: Ref<string[]>;
+
 export default function useNavigation() {
+	if (!activeGroups) activeGroups = ref([]);
+
 	const collectionsStore = useCollectionsStore();
 
 	const userStore = useUserStore();
@@ -72,5 +76,5 @@ export default function useNavigation() {
 			});
 	});
 
-	return { customNavItems, navItems };
+	return { customNavItems, navItems, activeGroups };
 }