chore: improve UX at sign screen

src/Components/RightSidebar/RightSidebar.vue

@@ -82,3 +82,20 @@ export default {
 	},
 }
 </script>
+<style lang="scss" scoped>
+
+@media (max-width: 512px) {
+	.app-sidebar {
+		height: unset;
+		top: unset;
+		right: unset;
+		left: unset;
+		bottom: 0;
+		::v-deep .app-sidebar-tabs__content{
+			min-height: unset;
+		}
+		transform: translateY(-1%) !important;
+		transition: transform 0.5s ease-in !important;
+	}
+}
+</style>

src/Components/RightSidebar/SignTab.vue

@@ -67,8 +67,12 @@ export default {
 header {
 	text-align: center;
 	width: 100%;
-	margin-top: 1em;
-	margin-bottom: 3em;
+}
+@media (min-width: 513px) {
+	header {
+		margin-top: 1em;
+		margin-bottom: 3em;
+	}
 }
 main {
 	flex-direction: column;

src/store/sidebar.js

@@ -41,5 +41,8 @@ export const useSidebarStore = defineStore('sidebar', {
 		hideSidebar() {
 			set(this, 'show', false)
 		},
+		toggleSidebar() {
+			set(this, 'show', !this.show)
+		},
 	},
 })

src/views/SignPDF/SignPDF.vue

@@ -4,14 +4,25 @@
 -->
 <template>
 	<div class="main-view">
-		<TopBar :sidebar-toggle="true" />
+		<TopBar
+			v-if="!isMobile" 
+			:sidebar-toggle="true" />
 		<PdfEditor v-if="mounted && !signStore.errors.length && pdfBlob"
 			ref="pdfEditor"
 			width="100%"
 			height="100%"
 			:file="pdfBlob"
 			:read-only="true"
 			@pdf-editor:end-init="updateSigners" />
+		<div class="button-wrapper">
+			<NcButton
+			v-if="isMobile"
+			:wide="true"
+			variant="primary"
+			@click.prevent="toggleSidebar">	
+			{{ t('libresign', 'Sign') }}
+			</NcButton>
+		</div>
 		<NcNoteCard v-for="(error, index) in signStore.errors"
 			:key="index"
 			:heading="error.title || ''"
@@ -23,6 +34,7 @@
 
 <script>
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import NcButton from '@nextcloud/vue/components/NcButton'
 
 import PdfEditor from '../../Components/PdfEditor/PdfEditor.vue'
 import TopBar from '../../Components/TopBar/TopBar.vue'
@@ -36,6 +48,7 @@ export default {
 	name: 'SignPDF',
 	components: {
 		NcNoteCard,
+		NcButton,
 		TopBar,
 		PdfEditor,
 	},
@@ -44,7 +57,8 @@ export default {
 		const fileStore = useFilesStore()
 		const sidebarStore = useSidebarStore()
 		const signMethodsStore = useSignMethodsStore()
-		return { signStore, fileStore, sidebarStore, signMethodsStore }
+		const isMobile = window.innerWidth <= 512
+		return { signStore, fileStore, sidebarStore, signMethodsStore, isMobile }
 	},
 	data() {
 		return {
@@ -58,6 +72,10 @@ export default {
 		} else if (this.$route.name === 'SignPDF') {
 			await this.initSignInternal()
 		}
+
+		if (this.isMobile){
+			this.toggleSidebar();
+		}
 	},
 	methods: {
 		async initSignExternal() {
@@ -115,6 +133,9 @@ export default {
 			})
 			this.signStore.mounted = true
 		},
+		toggleSidebar() {
+			this.sidebarStore.toggleSidebar()
+		}
 	},
 }
 </script>
@@ -138,4 +159,7 @@ export default {
 		margin: 0 auto;
 	}
 }
+.button-wrapper {
+	padding: 5px 16px;
+}
 </style>