From 45f846c49c4a77ea08a2e09643910cb26cf2cebb Mon Sep 17 00:00:00 2001
From: Hamza Mahjoubi <hamzamahjoubi221@gmail.com>
Date: Mon, 14 Oct 2024 20:26:47 +0200
Subject: [PATCH] fix(NcAppDetailsToggle): Rtl support

Signed-off-by: Hamza Mahjoubi <hamzamahjoubi221@gmail.com>
---
 src/components/NcAppContent/NcAppDetailsToggle.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/NcAppContent/NcAppDetailsToggle.vue b/src/components/NcAppContent/NcAppDetailsToggle.vue
index b056683ae3..6626cb103b 100644
--- a/src/components/NcAppContent/NcAppDetailsToggle.vue
+++ b/src/components/NcAppContent/NcAppDetailsToggle.vue
@@ -10,7 +10,8 @@
 		class="app-details-toggle"
 		:class="{ 'app-details-toggle--mobile': isMobile }">
 		<template #icon>
-			<ArrowRight :size="20" />
+			<ArrowLeft v-if="isRTL" :size="20" />
+			<ArrowRight v-else :size="20" />
 		</template>
 	</NcButton>
 </template>
@@ -23,7 +24,10 @@ import Tooltip from '../../directives/Tooltip/index.js'
 import { emit } from '@nextcloud/event-bus'
 
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
+
 import { useIsMobile } from '../../composables/useIsMobile/index.js'
+import { getLanguage, isRTL } from '@nextcloud/l10n'
 
 export default {
 	name: 'NcAppDetailsToggle',
@@ -35,6 +39,7 @@ export default {
 	components: {
 		NcButton,
 		ArrowRight,
+		ArrowLeft,
 	},
 	setup() {
 		return {
@@ -46,6 +51,9 @@ export default {
 		title() {
 			return t('Go back to the list')
 		},
+		isRTL() {
+			return isRTL(getLanguage())
+		},
 	},
 	watch: {
 		isMobile: {
@@ -92,10 +100,10 @@ export default {
 
 	top: var(--app-navigation-padding);
 	// Navigation Toggle button width + 2 paddings around
-	left: calc(var(--default-clickable-area) + var(--app-navigation-padding) * 2);
+	inset-inline-start: calc(var(--default-clickable-area) + var(--app-navigation-padding) * 2);
 	&--mobile {
 		// There is no NavigationToggle button
-		left: var(--app-navigation-padding);
+		inset-inline-start: var(--app-navigation-padding);
 	}
 
 	&:active,