From 2ff66cfecddd0be92a6050c280cf7bbaf3cb966f Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 7 May 2021 14:17:46 -0400
Subject: [PATCH] Make sure active collection is in overflow view of the menu

---
 .../collections/components/navigation.vue      | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/src/modules/collections/components/navigation.vue b/app/src/modules/collections/components/navigation.vue
index f3af71cd2e..e8438630a5 100644
--- a/app/src/modules/collections/components/navigation.vue
+++ b/app/src/modules/collections/components/navigation.vue
@@ -1,5 +1,10 @@
 <template>
-	<v-list large class="collections-navigation" @contextmenu.native.prevent.stop="$refs.contextMenu.activate">
+	<v-list
+		ref="listComponent"
+		large
+		class="collections-navigation"
+		@contextmenu.native.prevent.stop="$refs.contextMenu.activate"
+	>
 		<template v-if="customNavItems && customNavItems.length > 0">
 			<template v-for="(group, index) in customNavItems">
 				<template
@@ -90,7 +95,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref, watchEffect } from '@vue/composition-api';
+import { defineComponent, computed, ref, watchEffect, onMounted } from '@vue/composition-api';
+import Vue from 'vue';
 import useNavigation from '../composables/use-navigation';
 import { usePresetsStore, useUserStore } from '@/stores/';
 import { orderBy } from 'lodash';
@@ -107,6 +113,8 @@ export default defineComponent({
 	},
 	setup() {
 		const { searchQuery, visible } = useSearch();
+		const listComponent = ref<Vue>();
+
 		const contextMenu = ref();
 
 		const presetsStore = usePresetsStore();
@@ -145,6 +153,11 @@ export default defineComponent({
 			visible.value = bookmarks.value.length + navItems.value.length;
 		});
 
+		onMounted(() => {
+			const activeEl = listComponent.value?.$el.querySelector('.v-list-item.router-link-exact-active.active.link');
+			activeEl?.scrollIntoView({ block: 'center' });
+		});
+
 		return {
 			navItems,
 			bookmarks,
@@ -157,6 +170,7 @@ export default defineComponent({
 			hiddenShown,
 			hiddenNavItems,
 			searchQuery,
+			listComponent,
 		};
 
 		function isActive(name: string) {