Add RoomSettings comp

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/organisms/room/RoomView.jsx

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './RoomView.scss';
 
 import EventEmitter from 'events';
 
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+
 import RoomViewHeader from './RoomViewHeader';
 import RoomViewContent from './RoomViewContent';
 import RoomViewFloating from './RoomViewFloating';
@@ -13,11 +16,27 @@ import RoomViewCmdBar from './RoomViewCmdBar';
 const viewEvent = new EventEmitter();
 
 function RoomView({ roomTimeline, eventId }) {
+  const roomViewRef = useRef(null);
   // eslint-disable-next-line react/prop-types
   const { roomId } = roomTimeline;
 
+  useEffect(() => {
+    const settingsToggle = (isVisible) => {
+      const roomView = roomViewRef.current;
+      roomView.classList.toggle('room-view--dropped');
+
+      const roomViewContent = roomView.children[1];
+      if (isVisible) setTimeout(() => { roomViewContent.style.visibility = 'hidden'; }, 200);
+      else roomViewContent.style.visibility = 'visible';
+    };
+    navigation.on(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
+    return () => {
+      navigation.removeListener(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
+    };
+  }, []);
+
   return (
-    <div className="room-view">
+    <div className="room-view" ref={roomViewRef}>
       <RoomViewHeader roomId={roomId} />
       <div className="room-view__content-wrapper">
         <div className="room-view__scrollable">