RightSidebar.vue

<!--
  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<NcAppSidebar v-if="sidebarStore.activeTab.length > 0"
		ref="rightAppSidebar"
		:open="sidebarStore.isVisible"
		:name="fileName"
		:subtitle="subTitle"
		v-model:active="sidebarStore.activeTab"
		@update:active="handleUpdateActive"
		@close="closeSidebar">
		<NcAppSidebarTab v-if="showSign"
			id="sign-tab"
			:name="fileName">
			<SignTab />
		</NcAppSidebarTab>
		<NcAppSidebarTab v-if="showRequestSignatureTab"
			id="request-signature-tab"
			:name="fileName">
			<RequestSignatureTab />
		</NcAppSidebarTab>
	</NcAppSidebar>
</template>

<script>
import { t } from '@nextcloud/l10n'

import NcAppSidebar from '@nextcloud/vue/components/NcAppSidebar'
import NcAppSidebarTab from '@nextcloud/vue/components/NcAppSidebarTab'

import RequestSignatureTab from '../RightSidebar/RequestSignatureTab.vue'
import SignTab from '../RightSidebar/SignTab.vue'

import { useFilesStore } from '../../store/files.js'
import { useSidebarStore } from '../../store/sidebar.js'
import { useSignStore } from '../../store/sign.js'

export default {
	name: 'RightSidebar',
	components: {
		NcAppSidebar,
		NcAppSidebarTab,
		RequestSignatureTab,
		SignTab,
	},
	setup() {
		const filesStore = useFilesStore()
		const signStore = useSignStore()
		const sidebarStore = useSidebarStore()
		return { filesStore, signStore, sidebarStore }
	},
	computed: {
		fileName() {
			return this.filesStore.getFile()?.name ?? ''
		},
		subTitle() {
			if (!this.opened) {
				return t('libresign', 'Enter who will receive the request')
			}
			return this.filesStore.getSubtitle()
		},
		showRequestSignatureTab() {
			return this.sidebarStore.activeTab === 'request-signature-tab'
		},
		showSign() {
			return this.sidebarStore.activeTab === 'sign-tab'
		},
	},
	watch: {
		'sidebarStore.activeTab'(newValue, previousValue) {
			if (this.$refs?.rightAppSidebar?.$refs?.tabs) {
				this.$refs.rightAppSidebar.$refs.tabs.activeTab = newValue
			}
		},
		'$route.name'(routeName) {
			this.sidebarStore.handleRouteChange(routeName)
		},
	},
	methods: {
		t,
		handleUpdateActive(active) {
			this.sidebarStore.setActiveTab(active)
		},
		closeSidebar() {
			this.sidebarStore.hideSidebar()
		},
	},
}
</script>
<style lang="scss" scoped>
.app-sidebar__tab  {
	box-shadow: none !important;
}

@media (max-width: 512px) {
	.app-sidebar {
		height: unset;
		top: unset;
		right: unset;
		left: unset;
		bottom: 0;
		:deep(.app-sidebar-tabs__content) {
			min-height: unset;
		}
		transform: translateY(-1%) !important;
		transition: transform 0.5s ease-in !important;
	}
}
</style>