From 19e7f643f3c404d4bc34ad0ddfbb0419bf256e2a Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Tue, 5 Mar 2024 02:31:53 -0800
Subject: [PATCH] fix(NcAppNavigation): Wrap app navigation default slot with
 scrollable container

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 .../NcAppNavigation/NcAppNavigation.vue         | 17 ++++++++++++++++-
 .../NcAppNavigationList/NcAppNavigationList.vue |  8 +-------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
index 386863f1a9..2ca777abb9 100644
--- a/src/components/NcAppNavigation/NcAppNavigation.vue
+++ b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -64,7 +64,11 @@ emit('toggle-navigation', {
 			class="app-navigation__content"
 			:inert="!open || undefined"
 			@keydown.esc="handleEsc">
-			<slot />
+			<div v-if="$scopedSlots.default" class="app-navigation__body">
+				<!-- @slot Content within the nav, do NOT add NcModal/NcDialog inside this slot -->
+				<slot />
+			</div>
+
 			<!-- List for Navigation li-items -->
 			<ul v-if="$scopedSlots.list" class="app-navigation__list">
 				<slot name="list" />
@@ -255,6 +259,17 @@ export default {
 		position: absolute;
 	}
 
+	&__body {
+		position: relative;
+		height: 100%;
+		width: 100%;
+		overflow-x: hidden;
+		overflow-y: auto;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+	}
+
 	&__content > ul,
 	&__list {
 		position: relative;
diff --git a/src/components/NcAppNavigationList/NcAppNavigationList.vue b/src/components/NcAppNavigationList/NcAppNavigationList.vue
index b963eaf610..d6a673b869 100644
--- a/src/components/NcAppNavigationList/NcAppNavigationList.vue
+++ b/src/components/NcAppNavigationList/NcAppNavigationList.vue
@@ -63,17 +63,11 @@ ul.app-navigation-list { // Increase specificity over NcAppNavigation styles
 	position: relative;
 	height: fit-content;
 	width: 100%;
-	overflow: unset;
+	overflow: visible;
 	box-sizing: border-box;
 	display: flex;
 	flex-direction: column;
 	gap: var(--default-grid-baseline, 4px);
 	padding: var(--app-navigation-padding);
-
-	&:nth-last-of-type(2) {
-		// Fill remaining space before NcAppNavigation footer
-		height: 100%;
-		overflow: auto;
-	}
 }
 </style>