[FIX] Sidebar not closing when clicking on a channel

client/sidebar/RoomList/SideBarItemTemplateWithData.js

@@ -3,6 +3,7 @@ import React, { memo } from 'react';
 
 import { roomTypes } from '../../../app/utils/client';
 import RoomMenu from '../RoomMenu';
+import { useSidebarClose } from '../hooks/useSidebarDisplay';
 import SidebarIcon from './SidebarIcon';
 import { normalizeSidebarMessage } from './normalizeSidebarMessage';
 
@@ -37,8 +38,10 @@ function SideBarItemTemplateWithData({
 	sidebarViewMode,
 	isAnonymous,
 }) {
-	const title = roomTypes.getRoomName(room.t, room);
+	const { closeSidebar } = useSidebarClose();
+
 	const href = roomTypes.getRouteLink(room.t, room);
+	const title = roomTypes.getRoomName(room.t, room);
 
 	const {
 		lastMessage,
@@ -90,6 +93,7 @@ function SideBarItemTemplateWithData({
 			threadUnread={threadUnread}
 			selected={selected}
 			href={href}
+			onClick={() => !selected && closeSidebar()}
 			aria-label={title}
 			title={title}
 			time={lastMessage?.ts}

client/sidebar/hooks/useSidebarDisplay.ts

@@ -0,0 +1,19 @@
+export const useSidebarClose = (): {
+	closeSidebar: () => void;
+} => {
+	const closeSidebar = (): void => {
+		const sidebarWrap = $('.sidebar-wrap');
+		const sidebar = $('.sidebar');
+		const wrapper = $('.messages-box > .wrapper');
+
+		sidebarWrap.css('width', '');
+		sidebarWrap.css('background-color', '');
+		sidebar.css('transform', '');
+		sidebar.css('box-shadow', '');
+		sidebar.css('transition', '');
+		sidebarWrap.css('transition', '');
+		wrapper && wrapper.css('overflow', '');
+	};
+
+	return { closeSidebar };
+};

client/views/room/Header/Header.js

@@ -19,6 +19,7 @@ const Header = ({ room }) => {
 		}),
 		[isMobile],
 	);
+
 	if (isEmbedded && !showTopNavbarEmbeddedLayout) {
 		return null;
 	}