From 0d11f85ab3b03793036d6f7cd3bbb246380760df Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <rmidhunsuresh@gmail.com>
Date: Mon, 24 May 2021 22:19:05 +0530
Subject: [PATCH] Add CSS to display sidebar to the right

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
---
 src/platform/web/ui/css/layout.css         | 7 +++++++
 src/platform/web/ui/css/main.css           | 1 +
 src/platform/web/ui/css/right-panel.css    | 3 +++
 src/platform/web/ui/session/SessionView.js | 3 ++-
 4 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 src/platform/web/ui/css/right-panel.css

diff --git a/src/platform/web/ui/css/layout.css b/src/platform/web/ui/css/layout.css
index 9670afad..1eba5270 100644
--- a/src/platform/web/ui/css/layout.css
+++ b/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 {
diff --git a/src/platform/web/ui/css/main.css b/src/platform/web/ui/css/main.css
index aa22839e..82b849c8 100644
--- a/src/platform/web/ui/css/main.css
+++ b/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');
diff --git a/src/platform/web/ui/css/right-panel.css b/src/platform/web/ui/css/right-panel.css
new file mode 100644
index 00000000..4334ffb1
--- /dev/null
+++ b/src/platform/web/ui/css/right-panel.css
@@ -0,0 +1,3 @@
+.RoomInfo{
+    grid-area: right;
+}
diff --git a/src/platform/web/ui/session/SessionView.js b/src/platform/web/ui/session/SessionView.js
index 1208e0b3..2c2a3cd1 100644
--- a/src/platform/web/ui/session/SessionView.js
+++ b/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)),