Fix the back arraw to work properly

Signed-off-by: GretaD <gretadoci@gmail.com>

src/components/AppDetailsToggle.vue

@@ -35,17 +35,27 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .toggle {
 	position: fixed;
-	display: inline-block;
-	left: 0;
 	width: 44px;
 	height: 44px;
-	z-index: 1500;
+	padding: 14px;
 	cursor: pointer;
+	opacity: .6;
+	font-size: 16px;
+	line-height: 17px;
 	transform: rotate(180deg);
 	background-color: var(--color-main-background);
-	opacity: 1;
+	z-index: 2000;
+&:active,
+&:hover,
+&:focus {
+	 opacity: 1;
+ }
+// Hide app-navigation toggle if shown
+	&::v-deep + .app-navigation .app-navigation-toggle {
+	   display: none;
+   }
 }
 </style>

src/components/Thread.vue

@@ -76,7 +76,7 @@ export default {
 			error: undefined,
 			expandedThreads: [],
 			participantsToDisplay: 999,
-			resizeDebounced: debounce(500, this.updateParticipantsToDisplay)
+			resizeDebounced: debounce(500, this.updateParticipantsToDisplay),
 		}
 	},
 

src/views/Home.vue

 <template>
 	<Content v-shortkey.once="['c']" app-name="mail" @shortkey.native="onNewMessage">
+		<AppDetailsToggle v-if="isMobile && isThreadShown"
+			@close="hideMessage" />
 		<Navigation />
 		<MailboxThread v-if="activeAccount" :account="activeAccount" :mailbox="activeMailbox" />
 	</Content>
@@ -7,6 +9,7 @@
 
 <script>
 import Content from '@nextcloud/vue/dist/Components/Content'
+import AppDetailsToggle from '../components/AppDetailsToggle'
 
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile'
 import logger from '../logger'
@@ -19,6 +22,7 @@ export default {
 		Content,
 		MailboxThread,
 		Navigation,
+		AppDetailsToggle,
 	},
 	mixins: [isMobile],
 	computed: {
@@ -31,6 +35,9 @@ export default {
 		menu() {
 			return this.buildMenu()
 		},
+		isThreadShown() {
+			return this.$route.params.threadId
+		},
 	},
 	created() {
 		const accounts = this.$store.getters.accounts
@@ -94,8 +101,18 @@ export default {
 				},
 			})
 		},
+		hideMessage() {
+			this.$router.replace({
+				name: 'mailbox',
+				params: {
+					mailboxId: this.$route.params.mailboxId,
+					filter: this.$route.params?.filter,
+				},
+			})
+		},
 	},
 }
+
 </script>
 
 <style lang="scss" scoped>