Fix missing Talk sidebar trigger in public share pages

css/publicshare.css

@@ -67,21 +67,3 @@
 	 * from the top padding of the second element). */
 	padding-bottom: 8px;
 }
-
-
-
-#talk-sidebar-trigger {
-	width: 44px;
-	height: 44px;
-
-	background-color: transparent;
-	border-color: transparent;
-
-	opacity: 0.6;
-}
-
-#talk-sidebar-trigger:hover,
-#talk-sidebar-trigger:focus,
-#talk-sidebar-trigger:active {
-	opacity: 1;
-}

src/PublicShareSidebarTrigger.vue

@@ -0,0 +1,73 @@
+<!--
+  - @copyright Copyright (c) 2022 Daniel Calviño Sánchez <[email protected]>
+  -
+  - @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>

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()