From fad0787266fbfe983841227133f4a80183c0690e Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Tue, 8 Oct 2019 18:12:58 +0900
Subject: [PATCH] sidenav of messenger is added

---
 .../components/main.page.component.html       | 23 ++++++++++++-------
 .../components/main.page.component.scss       |  5 ++++
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
index 58615978..e1c2a904 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
@@ -2,14 +2,21 @@
   <div class="left-side">
     <app-layout-messenger-left-side></app-layout-messenger-left-side>
   </div>
-  <div class="contents">
-    <app-layout-messenger-intro
-      *ngIf="!(this.selectedChat$ | async)"
-    ></app-layout-messenger-intro>
-    <app-layout-messenger-messages
-      *ngIf="!!(this.selectedChat$ | async)"
-    ></app-layout-messenger-messages>
-  </div>
+  <mat-drawer-container class="contents" autosize>
+    <div class="messages">
+      <app-layout-messenger-intro
+        (click)="drawer.toggle()"
+        *ngIf="!(this.selectedChat$ | async)"
+      ></app-layout-messenger-intro>
+      <app-layout-messenger-messages
+        *ngIf="!!(this.selectedChat$ | async)"
+      ></app-layout-messenger-messages>
+    </div>
+    <mat-drawer #drawer mode="side" position="end">
+      <p>sidenav</p>
+    </mat-drawer>
+  </mat-drawer-container>
+
   <div class="right-side">
     <app-layout-messenger-right-side></app-layout-messenger-right-side>
   </div>
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
index f07afd30..55e75745 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
@@ -10,6 +10,11 @@
     float: left;
     width: calc(100% - 360px);
     height: 100%;
+
+    .messages {
+      width: 100%;
+      height: 100%;
+    }
   }
   .right-side {
     float: left;