(responsive) auto hide/show rooms list on mobile

Author: antoine92190

src/ChatWindow/ChatWindow.vue

@@ -7,6 +7,7 @@
 				:room="room"
 				:textMessages="t"
 				:showRoomsList="showRoomsList"
+				:isMobile="isMobile"
 				@fetchRoom="fetchRoom"
 				@addRoom="addRoom"
 			>
@@ -23,6 +24,7 @@
 				:showReactionEmojis="showReactionEmojis"
 				:textMessages="t"
 				:showRoomsList="showRoomsList"
+				:isMobile="isMobile"
 				@toggleRoomsList="showRoomsList = !showRoomsList"
 				@fetchMessages="fetchMessages"
 				@sendMessage="sendMessage"
@@ -79,7 +81,9 @@ export default {
 	data() {
 		return {
 			room: {},
-			showRoomsList: true
+			showRoomsList: true,
+			mobileBreakpoint: 700,
+			isMobile: false
 		}
 	},
 
@@ -103,6 +107,11 @@ export default {
 		}
 	},
 
+	mounted() {
+		this.updateResponsive()
+		window.addEventListener('resize', () => this.updateResponsive())
+	},
+
 	computed: {
 		t() {
 			return {
@@ -121,9 +130,14 @@ export default {
 	},
 
 	methods: {
+		updateResponsive() {
+			this.isMobile = window.innerWidth < this.mobileBreakpoint
+			this.showRoomsList = !this.isMobile
+		},
 		fetchRoom({ room }) {
 			this.room = room
 			this.fetchMessages({ reset: true })
+			if (this.isMobile) this.showRoomsList = false
 		},
 		addRoom() {
 			this.$emit('addRoom')

src/ChatWindow/MessagesList.vue

@@ -1,5 +1,9 @@
 <template>
-	<div class="col-messages" :class="{ 'col-messages-full': !showRoomsList }">
+	<div
+		class="col-messages"
+		:class="{ 'col-messages-full': !showRoomsList }"
+		v-if="(isMobile && !showRoomsList) || !isMobile"
+	>
 		<div class="room-header app-border-b">
 			<div class="svg-button toggle-button" @click="$emit('toggleRoomsList')">
 				<svg-icon name="toggle" />
@@ -213,6 +217,7 @@ export default {
 		currentUserId: { type: String, required: true },
 		textMessages: { type: Object, required: true },
 		showRoomsList: { type: Boolean, required: true },
+		isMobile: { type: Boolean, required: true },
 		room: { type: Object, required: true },
 		messages: { type: Array, required: true },
 		messagesLoaded: { type: Boolean, required: true },
@@ -273,6 +278,8 @@ export default {
 		},
 		messages(newVal, oldVal) {
 			const element = document.getElementsByClassName('container-scroll')[0]
+			if (!element) return
+
 			const options = { top: element.scrollHeight }
 
 			if (oldVal && newVal && oldVal.length === newVal.length - 1) {
@@ -339,6 +346,7 @@ export default {
 			this.focusTextarea()
 		},
 		resetTextareaSize() {
+			if (!this.$refs['roomTextarea']) return
 			this.$refs['roomTextarea'].style.height = '32px'
 		},
 		focusTextarea() {

src/ChatWindow/RoomsList.vue

@@ -1,5 +1,9 @@
 <template>
-	<div class="rooms-container app-border-r" v-if="showRoomsList">
+	<div
+		class="rooms-container app-border-r"
+		:class="{ 'rooms-container-full': isMobile }"
+		v-if="showRoomsList"
+	>
 		<div class="box-search">
 			<div class="icon-search">
 				<svg-icon name="search" />
@@ -71,6 +75,7 @@ export default {
 	props: {
 		textMessages: { type: Object, required: true },
 		showRoomsList: { type: Boolean, required: true },
+		isMobile: { type: Boolean, required: true },
 		rooms: { type: Array, required: true },
 		loadingRooms: { type: Boolean, required: true },
 		room: { type: Object, required: true }
@@ -99,7 +104,7 @@ export default {
 			)
 		},
 		openRoom(room) {
-			if (room.roomId === this.room.roomId) return
+			if (room.roomId === this.room.roomId && !this.isMobile) return
 			this.selectedRoomId = room.roomId
 			this.$emit('fetchRoom', { room })
 		},
@@ -113,9 +118,13 @@ export default {
 <style lang="scss" scoped>
 .rooms-container {
 	flex: 0 0 25%;
-	max-width: 25%;
 	position: relative;
 	background: var(--chat-sidemenu-bg-color);
+	height: 100%;
+}
+
+.rooms-container-full {
+	flex: 0 0 100%;
 }
 
 .box-search {