Adapt to different device widths (#401)

* Now adapting to small screen sizes, needs improvements

* Fix that site only gets into mobile mode when resized

* - Added navigation event triggered if user requests to return to navigation on compact screens
- People drawer wont be shown on compact screens
  - Still accessible using settings
  - would be duplicated UI
- mobileSize is now compactSize

* Put threshold for collapsing the base UI in a shared file

* Switch to a more simple solution using CSS media queries over JS
- Move back button to the left a bit so it doesnt get in touch with room icon

* switch from component-individual-thresholds to device-type thresholds
- <750px: Mobile
- <900px: Tablet
- >900px: Desktop

* Make Settings drawer component collapse on mobile

* Fix EmojiBoard not showing up and messing up UI when screen is smaller than 360px

* Improve code quality; allow passing classNames to IconButton
- remove unnessesary div wrappers
- use dir.side where appropriate
- rename threshold and its mixins to more descriptive names
- Rename "OPEN_NAVIGATION" to "NAVIGATION_OPENED"

* - follow BEM methology
- remove ROOM_SELECTED listener
- rename NAVIGATION_OPENED to OPEN_NAVIGATION where appropriate
- this does NOT changes that ref should be used for changing visability

* Use ref to change visability to avoid re-rendering

* Use ref to change visability to avoid re-rendering

* Fix that room component is not hidden by default.
This resulted in a broken view when application is viewed in mobile size without having selected a room since loading.

* fix: leaving a room should bring one back to navigation

Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>

src/app/templates/client/Client.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import './Client.scss';
 
 import { initHotkeys } from '../../../client/event/hotkeys';
@@ -19,11 +19,45 @@ 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);
 
+  /**
+   * @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);
+  }
+  function onNavigationSelected() {
+    // setActiveView(viewPossibilities.nav);
+    navWrapperRef.current.classList.remove(classNameHidden);
+    roomWrapperRef.current.classList.add(classNameHidden);
+  }
+
+  useEffect(() => {
+    navigation.on(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
+    navigation.on(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
+
+    return (() => {
+      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
+      navigation.removeListener(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
+    });
+  }, []);
+  // #endregion
+
   useEffect(() => {
     let counter = 0;
     const iId = setInterval(() => {
@@ -64,6 +98,7 @@ function Client() {
     );
   }
 
+  // #region drag and drop
   function dragContainsFiles(e) {
     if (!e.dataTransfer.types) return false;
 
@@ -119,6 +154,7 @@ function Client() {
     initMatrix.roomsInput.setAttachment(roomId, file);
     initMatrix.roomsInput.emit(cons.events.roomsInput.ATTACHMENT_SET, file);
   }
+  // #endregion
 
   return (
     <div
@@ -128,10 +164,10 @@ function Client() {
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
     >
-      <div className="navigation__wrapper">
+      <div className="navigation__wrapper" ref={navWrapperRef}>
         <Navigation />
       </div>
-      <div className="room__wrapper">
+      <div className={`room__wrapper ${classNameHidden}`} ref={roomWrapperRef}>
         <Room />
       </div>
       <Windows />