fix mobile compatibility

Signed-off-by: Raymond Berger <RayBB@users.noreply.github.com>
nextcloud-libraries · Mar 20, 2024 · 71ba019 · 71ba019
1 parent 61906be
commit 71ba019
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -237,7 +237,8 @@ export default {
 	transition: transform var(--animation-quick), margin var(--animation-quick);
 	width: $navigation-width;
 	// Left toggle button padding + toggle button + right padding from NcAppContent
-	max-width: calc(100vw - (var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline)));
+	--app-navigation-max-width: calc(100vw - (var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline)));
+	max-width: var(--app-navigation-max-width);
 	position: relative;
 	top: 0;
 	left: 0;
@@ -252,12 +253,12 @@ export default {
 	user-select: none;
 	flex-grow: 0;
 	flex-shrink: 0;
-	background-color:  var(--color-main-background-blur, var(--color-main-background));
+	background-color: var(--color-main-background-blur, var(--color-main-background));
 	-webkit-backdrop-filter: var(--filter-background-blur, none);
 	backdrop-filter: var(--filter-background-blur, none);
 
 	&--close {
-		margin-left: -$navigation-width;
+		margin-left: calc(-1 * min($navigation-width, var(--app-navigation-max-width)));
 	}
 
 	// For legacy purposes support passing a bare list to the content in #default slot and including #footer slot