Add CSS to display sidebar to the right

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>

src/platform/web/ui/css/layout.css

@@ -54,6 +54,13 @@ main {
     min-width: 0;
 }
 
+.SideBarActive{
+    grid-template:
+        "status status status" auto
+        "left   middle right" 1fr /
+        300px   1fr 300px;
+}
+
 /* resize and reposition session view to account for mobile Safari which shifts
 the layout viewport up without resizing it when the keyboard shows */
 .hydrogen.ios .SessionView {

src/platform/web/ui/css/main.css

@@ -18,6 +18,7 @@ limitations under the License.
 @import url('layout.css');
 @import url('login.css');
 @import url('left-panel.css');
+@import url('right-panel.css');
 @import url('room.css');
 @import url('timeline.css');
 @import url('avatar.css');

src/platform/web/ui/css/right-panel.css

@@ -0,0 +1,3 @@
+.RoomInfo{
+    grid-area: right;
+}

src/platform/web/ui/session/SessionView.js

@@ -32,7 +32,8 @@ export class SessionView extends TemplateView {
         return t.div({
             className: {
                 "SessionView": true,
-                "middle-shown": vm => !!vm.activeMiddleViewModel
+                "middle-shown": vm => !!vm.activeMiddleViewModel,
+                "SideBarActive": vm => !!vm.roomInfoViewModel
             },
         }, [
             t.view(new SessionStatusView(vm.sessionStatusViewModel)),