Fix app stuck on welcome screen in small device

src/app/organisms/invite-list/InviteList.jsx

@@ -5,7 +5,7 @@ import './InviteList.scss';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import * as roomActions from '../../../client/action/room';
-import { selectRoom, selectTab, openNavigation } from '../../../client/action/navigation';
+import { selectRoom, selectTab } from '../../../client/action/navigation';
 
 import Text from '../../atoms/text/Text';
 import Button from '../../atoms/button/Button';
@@ -28,7 +28,6 @@ function InviteList({ isOpen, onRequestClose }) {
     procInvite.add(roomId);
     changeProcInvite(new Set(Array.from(procInvite)));
     roomActions.leave(roomId, isDM);
-    openNavigation();
   }
   function updateInviteList(roomId) {
     if (procInvite.has(roomId)) procInvite.delete(roomId);

src/app/organisms/room/Room.jsx

@@ -6,6 +6,7 @@ import cons from '../../../client/state/cons';
 import settings from '../../../client/state/settings';
 import RoomTimeline from '../../../client/state/RoomTimeline';
 import navigation from '../../../client/state/navigation';
+import { openNavigation } from '../../../client/action/navigation';
 
 import Welcome from '../welcome/Welcome';
 import RoomView from './RoomView';
@@ -53,7 +54,10 @@ function Room() {
   }, []);
 
   const { roomTimeline, eventId } = roomInfo;
-  if (roomTimeline === null) return <Welcome />;
+  if (roomTimeline === null) {
+    setTimeout(() => openNavigation());
+    return <Welcome />;
+  }
 
   return (
     <div className="room">

src/app/organisms/room/RoomSettings.jsx

@@ -7,7 +7,7 @@ import { blurOnBubbling } from '../../atoms/button/script';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
-import { openInviteUser, toggleRoomSettings, openNavigation } from '../../../client/action/navigation';
+import { openInviteUser, toggleRoomSettings } from '../../../client/action/navigation';
 import * as roomActions from '../../../client/action/room';
 
 import Text from '../../atoms/text/Text';
@@ -88,7 +88,6 @@ function GeneralSettings({ roomId }) {
           onClick={() => {
             if (confirm('Are you sure that you want to leave this room?')) {
               roomActions.leave(roomId);
-              openNavigation();
             }
           }}
           iconSrc={LeaveArrowIC}

src/app/organisms/room/RoomViewCmdBar.jsx

@@ -14,7 +14,6 @@ import {
   openCreateRoom,
   openPublicRooms,
   openInviteUser,
-  openNavigation,
 } from '../../../client/action/navigation';
 import { getEmojiForCompletion } from '../emoji-board/custom-emoji';
 import AsyncSearch from '../../../util/AsyncSearch';
@@ -47,7 +46,6 @@ const commands = [{
   description: 'Leave current room',
   exe: (roomId) => {
     roomActions.leave(roomId);
-    openNavigation();
   },
 }, {
   name: 'invite',

src/app/organisms/room/RoomViewHeader.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './RoomViewHeader.scss';
 
@@ -8,7 +8,7 @@ import { blurOnBubbling } from '../../atoms/button/script';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
-import { toggleRoomSettings, openReusableContextMenu } from '../../../client/action/navigation';
+import { toggleRoomSettings, openReusableContextMenu, openNavigation } from '../../../client/action/navigation';
 import { togglePeopleDrawer } from '../../../client/action/settings';
 import colorMXID from '../../../util/colorMXID';
 import { getEventCords } from '../../../util/common';
@@ -78,7 +78,7 @@ function RoomViewHeader({ roomId }) {
         src={BackArrowIC}
         className="room-header__back-btn"
         tooltip="Return to navigation"
-        onClick={() => navigation.emit(cons.events.navigation.NAVIGATION_OPENED)}
+        onClick={() => openNavigation()}
       />
       <button
         ref={roomHeaderBtnRef}

src/app/templates/client/Client.jsx

@@ -19,32 +19,22 @@ import navigation from '../../../client/state/navigation';
 import cons from '../../../client/state/cons';
 import DragDrop from '../../organisms/drag-drop/DragDrop';
 
-const classNameHidden = 'client__item-hidden';
-
 function Client() {
   const [isLoading, changeLoading] = useState(true);
   const [loadingMsg, setLoadingMsg] = useState('Heating up');
   const [dragCounter, setDragCounter] = useState(0);
+  const classNameHidden = 'client__item-hidden';
 
-  /**
-   * @type {React.MutableRefObject<HTMLDivElement>}
-   */
   const navWrapperRef = useRef(null);
-  /**
-   * @type {React.MutableRefObject<HTMLDivElement>}
-   */
   const roomWrapperRef = useRef(null);
 
-  // #region Liston on events for compact screen sizes
   function onRoomSelected() {
-    // setActiveView(viewPossibilities.room);
-    navWrapperRef.current.classList.add(classNameHidden);
-    roomWrapperRef.current.classList.remove(classNameHidden);
+    navWrapperRef.current?.classList.add(classNameHidden);
+    roomWrapperRef.current?.classList.remove(classNameHidden);
   }
   function onNavigationSelected() {
-    // setActiveView(viewPossibilities.nav);
-    navWrapperRef.current.classList.remove(classNameHidden);
-    roomWrapperRef.current.classList.add(classNameHidden);
+    navWrapperRef.current?.classList.remove(classNameHidden);
+    roomWrapperRef.current?.classList.add(classNameHidden);
   }
 
   useEffect(() => {
@@ -56,7 +46,6 @@ function Client() {
       navigation.removeListener(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
     });
   }, []);
-  // #endregion
 
   useEffect(() => {
     let counter = 0;
@@ -98,7 +87,6 @@ function Client() {
     );
   }
 
-  // #region drag and drop
   function dragContainsFiles(e) {
     if (!e.dataTransfer.types) return false;
 
@@ -154,7 +142,6 @@ function Client() {
     initMatrix.roomsInput.setAttachment(roomId, file);
     initMatrix.roomsInput.emit(cons.events.roomsInput.ATTACHMENT_SET, file);
   }
-  // #endregion
 
   return (
     <div

src/client/action/navigation.js

@@ -23,9 +23,7 @@ export function selectRoom(roomId, eventId) {
   });
 }
 
-/**
- * Open navigation on compact screen sizes
- */
+// Open navigation on compact screen sizes
 export function openNavigation() {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_NAVIGATION,