Fix missing Talk sidebar trigger in public share pages

Since the removal of SCSS files the "menu-people" icon can no longer be
used directly with a CSS class. However, it is available as a Vue
component; although it would be possible to directly render the Vue
component for the icon inside the button element the whole button is
moved to Vue instead, as the other approach requires more fighting with
the styles.

As the icon will be shown with a transparent background on the header,
which uses the primary color, the fill color of the icon needs to be
explicitly set to the primary text color.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

2 files changed, 85 insertions, 4 deletions

diff --git a/src/PublicShareSidebarTrigger.vue b/src/PublicShareSidebarTrigger.vue
new file mode 100644
index 000000000..99a049ede
--- /dev/null
+++ b/src/PublicShareSidebarTrigger.vue
@@ -0,0 +1,73 @@
+<!--
+  - @copyright Copyright (c) 2022 Daniel Calviño Sánchez <danxuliu@gmail.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div class="button-holder">
+		<Button type="tertiary-on-primary"
+			:aria-label="ariaLabel"
+			@click="$emit('click')">
+			<template #icon>
+				<MenuPeople :size="20" />
+			</template>
+		</Button>
+	</div>
+</template>
+
+<script>
+import Button from '@nextcloud/vue/dist/Components/Button'
+import MenuPeople from './components/missingMaterialDesignIcons/MenuPeople.vue'
+
+export default {
+
+	name: 'PublicShareSidebarTrigger',
+
+	components: {
+		Button,
+		MenuPeople,
+	},
+
+	props: {
+		sidebarState: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	computed: {
+		ariaLabel() {
+			if (this.sidebarState.isOpen) {
+				return t('spreed', 'Close Talk sidebar')
+			}
+
+			return t('spreed', 'Open Talk sidebar')
+		},
+	},
+
+}
+</script>
+
+<style scoped>
+.button-holder {
+	margin: 2px 5px 2px 2px;
+	display: flex;
+	justify-content: center;
+	height: 44px !important;
+}
+</style>
diff --git a/src/mainPublicShareSidebar.js b/src/mainPublicShareSidebar.js
index f2ba41d77..ee4f468be 100644
--- a/src/mainPublicShareSidebar.js
+++ b/src/mainPublicShareSidebar.js
@@ -21,6 +21,7 @@
 import Vue from 'vue'
 import VueObserveVisibility from 'vue-observe-visibility'
 import PublicShareSidebar from './PublicShareSidebar.vue'
+import PublicShareSidebarTrigger from './PublicShareSidebarTrigger.vue'
 import './init.js'
 
 // Store
@@ -98,10 +99,6 @@ if (window.innerWidth > 1111) {
 function addTalkSidebarTrigger() {
 	const talkSidebarTriggerElement = document.createElement('button')
 	talkSidebarTriggerElement.setAttribute('id', 'talk-sidebar-trigger')
-	talkSidebarTriggerElement.setAttribute('class', 'icon-menu-people-white')
-	talkSidebarTriggerElement.addEventListener('click', () => {
-		sidebarState.isOpen = !sidebarState.isOpen
-	})
 
 	// The ".header-right" element may not exist in the public share page if
 	// there are no header actions.
@@ -112,6 +109,17 @@ function addTalkSidebarTrigger() {
 	}
 
 	document.querySelector('.header-right').appendChild(talkSidebarTriggerElement)
+
+	const talkSidebarTriggerVm = new Vue({
+		propsData: {
+			sidebarState,
+		},
+		...PublicShareSidebarTrigger,
+	})
+	talkSidebarTriggerVm.$on('click', () => {
+		sidebarState.isOpen = !sidebarState.isOpen
+	})
+	talkSidebarTriggerVm.$mount('#talk-sidebar-trigger')
 }
 
 addTalkSidebarTrigger()