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/client/state/cons.js

@@ -47,6 +47,7 @@ const cons = {
       CLICK_REPLY_TO: 'CLICK_REPLY_TO',
       OPEN_SEARCH: 'OPEN_SEARCH',
       OPEN_REUSABLE_CONTEXT_MENU: 'OPEN_REUSABLE_CONTEXT_MENU',
+      OPEN_NAVIGATION: 'OPEN_NAVIGATION',
       OPEN_REUSABLE_DIALOG: 'OPEN_REUSABLE_DIALOG',
     },
     room: {
@@ -93,6 +94,7 @@ const cons = {
       REPLY_TO_CLICKED: 'REPLY_TO_CLICKED',
       SEARCH_OPENED: 'SEARCH_OPENED',
       REUSABLE_CONTEXT_MENU_OPENED: 'REUSABLE_CONTEXT_MENU_OPENED',
+      NAVIGATION_OPENED: 'NAVIGATION_OPENED',
       REUSABLE_DIALOG_OPENED: 'REUSABLE_DIALOG_OPENED',
     },
     roomList: {