left side drawer is implemented

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html

@@ -65,6 +65,11 @@
   ></ucap-float-action-button>
 </div>
 
-<button mat-icon-button class="left-drawer-toggle" *ngIf="showLeftDrawerToggle">
+<button
+  mat-icon-button
+  class="left-drawer-toggle"
+  *ngIf="showLeftDrawerToggle"
+  (click)="onClickLeftDrawerToggle()"
+>
   <mat-icon>settings</mat-icon>
 </button>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts

@@ -212,6 +212,10 @@ export class LeftSideComponent implements OnInit, OnDestroy {
     this.showLeftDrawerToggle = false;
   }
 
+  onClickLeftDrawerToggle() {
+    this.store.dispatch(ChatStore.toggleLeftSideDrawer());
+  }
+
   async onClickNewChat(type: string = 'NORMAL') {
     const result = await this.dialogService.open<
       CreateChatDialogComponent,

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html

@@ -4,7 +4,7 @@
   </div>
 
   <mat-drawer-container class="contents" autosize>
-    <mat-drawer #drawer mode="side" opened>
+    <mat-drawer #leftSideDrawer mode="side" opened>
       <app-layout-messenger-left-side
         (openProfile)="onClickOpenProfile($event)"
         (sendCall)="sendClickToCall($event)"

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts

@@ -61,6 +61,7 @@ export class MainPageComponent implements OnInit, OnDestroy {
   chatOpenRoomSubscription: Subscription;
   msgOpenMessageSubscription: Subscription;
   myIdleCheckTimeSubscription: Subscription;
+  leftSideDrawerSubscription: Subscription;
 
   defaultLeftSideComponentWidth = 380;
   leftSideComponentWidth = this.defaultLeftSideComponentWidth;
@@ -70,6 +71,7 @@ export class MainPageComponent implements OnInit, OnDestroy {
   environmentsInfo: EnvironmentsInfo;
 
   @ViewChild('rightDrawer', { static: true }) rightDrawer: MatDrawer;
+  @ViewChild('leftSideDrawer', { static: true }) leftSideDrawer: MatDrawer;
 
   constructor(
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
@@ -110,6 +112,18 @@ export class MainPageComponent implements OnInit, OnDestroy {
       })
     );
 
+    this.leftSideDrawerSubscription = this.store
+      .pipe(
+        select(AppStore.MessengerSelector.ChatSelector.selectLeftSideDrawer)
+      )
+      .subscribe(leftSideDrawer => {
+        if (leftSideDrawer) {
+          this.leftSideDrawer.open();
+        } else {
+          this.leftSideDrawer.close();
+        }
+      });
+
     this.idleStateChangedSubscription = this.nativeService
       .idleStateChanged()
       .subscribe(action => {
@@ -218,6 +232,10 @@ export class MainPageComponent implements OnInit, OnDestroy {
       this.myIdleCheckTimeSubscription.unsubscribe();
     }
 
+    if (!!this.leftSideDrawerSubscription) {
+      this.leftSideDrawerSubscription.unsubscribe();
+    }
+
     this.logger.debug('-----------------------MainPageComponent ngOnDestroy');
   }
 

projects/ucap-webmessenger-app/src/app/store/messenger/chat/actions.ts

@@ -53,3 +53,7 @@ export const clearRightDrawer = createAction(
   '[Messenger::Chat] Clear Right Drawer',
   props()
 );
+
+export const toggleLeftSideDrawer = createAction(
+  '[Messenger::Chat] Toggle Left Side Drawer'
+);

projects/ucap-webmessenger-app/src/app/store/messenger/chat/reducers.ts

@@ -8,7 +8,8 @@ import {
   massTalkDownloadSuccess,
   clearSelectedRoom,
   selectedRightDrawer,
-  clearRightDrawer
+  clearRightDrawer,
+  toggleLeftSideDrawer
 } from './actions';
 
 import * as AuthenticationStore from '@app/store/account/authentication';
@@ -61,6 +62,12 @@ export const reducer = createReducer(
       selectedRightDrawer: action.req
     };
   }),
+  on(toggleLeftSideDrawer, (state, action) => {
+    return {
+      ...state,
+      leftSideDrawer: !state.leftSideDrawer
+    };
+  }),
   on(clearRightDrawer, (state, action) => {
     return {
       ...state,

projects/ucap-webmessenger-app/src/app/store/messenger/chat/state.ts

@@ -7,13 +7,15 @@ export interface State {
   massDetailProcessing: boolean;
 
   selectedRightDrawer: string | null;
+  leftSideDrawer: boolean;
 }
 
 export const initialState: State = {
   selectedRoom: null,
   selectedMassDetail: null,
   massDetailProcessing: false,
-  selectedRightDrawer: ''
+  selectedRightDrawer: '',
+  leftSideDrawer: true
 };
 
 export function selectors<S>(selector: Selector<any, State>) {
@@ -29,6 +31,10 @@ export function selectors<S>(selector: Selector<any, State>) {
     selectedRightDrawer: createSelector(
       selector,
       (state: State) => state.selectedRightDrawer
+    ),
+    selectLeftSideDrawer: createSelector(
+      selector,
+      (state: State) => state.leftSideDrawer
     )
   };
 }