Add slide animation when opening and closing the sidebar

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

src/PublicShareSidebar.vue

@@ -19,19 +19,21 @@
   -->
 
 <template>
-	<aside v-if="isOpen" id="talk-sidebar">
-		<div v-if="!conversation" class="emptycontent room-not-joined">
-			<div class="icon icon-talk" />
-			<h2>{{ t('spreed', 'Discuss this file') }}</h2>
-			<button class="primary" @click="joinConversation">
-				{{ t('spreed', 'Join conversation') }}
-			</button>
-		</div>
-		<div v-else class="emptycontent">
-			<div class="icon icon-talk" />
-			<h2>Conversation joined</h2>
-		</div>
-	</aside>
+	<transition name="slide-right">
+		<aside v-if="isOpen" id="talk-sidebar">
+			<div v-if="!conversation" class="emptycontent room-not-joined">
+				<div class="icon icon-talk" />
+				<h2>{{ t('spreed', 'Discuss this file') }}</h2>
+				<button class="primary" @click="joinConversation">
+					{{ t('spreed', 'Join conversation') }}
+				</button>
+			</div>
+			<div v-else class="emptycontent">
+				<div class="icon icon-talk" />
+				<h2>Conversation joined</h2>
+			</div>
+		</aside>
+	</transition>
 </template>
 
 <script>
@@ -148,4 +150,22 @@ export default {
 	overflow-y: auto;
 	z-index: 1500;
 }
+
+.slide-right-leave-active,
+.slide-right-enter-active {
+	transition-duration: var(--animation-quick);
+	transition-property: min-width, max-width;
+}
+
+.slide-right-enter-to,
+.slide-right-leave {
+	min-width: 300px;
+	max-width: 500px;
+}
+
+.slide-right-enter,
+.slide-right-leave-to {
+	min-width: 0 !important;
+	max-width: 0 !important;
+}
 </style>