From c88db662822a599c092bd55049cc02f3891a2dc3 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Tue, 19 Oct 2021 00:14:24 +0800
Subject: [PATCH] Fix "Show Hidden Collection" context menu in collections
 navigation (#8889)

* fix collection navigation for context menu hitbox

* fix "show hidden collections" in collection nav

* Fix overflow issues in large collection sets

Nothing a bit of flex-tape can't fix

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
---
 .../modules/collections/components/navigation.vue   | 13 +++++++++++--
 app/src/stores/collections.ts                       |  6 ++----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/app/src/modules/collections/components/navigation.vue b/app/src/modules/collections/components/navigation.vue
index 7c8673e370..4f42ac7b33 100644
--- a/app/src/modules/collections/components/navigation.vue
+++ b/app/src/modules/collections/components/navigation.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="collections-navigation">
+	<div class="collections-navigation-wrapper">
 		<div v-if="showSearch" class="search-input">
 			<v-input v-model="search" type="search" :placeholder="t('search_collection')" />
 		</div>
@@ -64,8 +64,9 @@ export default defineComponent({
 		const contextMenuTarget = ref<undefined | string>();
 
 		const rootItems = computed(() => {
+			const shownCollections = showHidden.value ? collectionsStore.allCollections : collectionsStore.visibleCollections;
 			return orderBy(
-				collectionsStore.visibleCollections.filter((collection) => {
+				shownCollections.filter((collection) => {
 					return isNil(collection?.meta?.group);
 				}),
 				['meta.sort', 'collection']
@@ -110,9 +111,17 @@ export default defineComponent({
 	}
 }
 
+.collections-navigation-wrapper {
+	display: flex;
+	flex-direction: column;
+	min-height: 100%;
+}
+
 .collections-navigation {
 	--v-list-min-height: calc(100% - 64px);
 
+	flex-grow: 1;
+
 	.v-detail {
 		:deep(.v-divider) {
 			margin: 0px;
diff --git a/app/src/stores/collections.ts b/app/src/stores/collections.ts
index 5b337deaf8..bcfea933fd 100644
--- a/app/src/stores/collections.ts
+++ b/app/src/stores/collections.ts
@@ -23,10 +23,8 @@ export const useCollectionsStore = defineStore({
 				.filter(({ collection }) => collection.startsWith('directus_') === false)
 				.filter((collection) => collection.meta?.hidden !== true);
 		},
-		hiddenCollections(): Collection[] {
-			return this.collections
-				.filter(({ collection }) => collection.startsWith('directus_') === false)
-				.filter((collection) => collection.meta?.hidden !== false);
+		allCollections(): Collection[] {
+			return this.collections.filter(({ collection }) => collection.startsWith('directus_') === false);
 		},
 		crudSafeSystemCollections(): Collection[] {
 			return orderBy(