indicator of left side drawer is added

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

@@ -64,12 +64,3 @@
     (buttonClick)="onClickFab($event)"
   ></ucap-float-action-button>
 </div>
-
-<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

@@ -100,8 +100,6 @@ export class LeftSideComponent implements OnInit, OnDestroy {
   loginRes: LoginResponse;
   loginResSubscription: Subscription;
 
-  showLeftDrawerToggle = false;
-
   constructor(
     private store: Store<any>,
     private dialogService: DialogService,
@@ -203,17 +201,32 @@ export class LeftSideComponent implements OnInit, OnDestroy {
       event.pageY <= maxY
     ) {
       this.logger.debug('mouseOver edge of container');
-      this.showLeftDrawerToggle = true;
+      this.store.dispatch(
+        ChatStore.toggleLeftSideDrawerIndicator({ show: true })
+      );
     }
   }
 
   @HostListener('mouseleave', ['$event'])
   mouseLeave(event: MouseEvent) {
-    this.showLeftDrawerToggle = false;
-  }
+    const rect = this.leftSideContainer.nativeElement.getBoundingClientRect();
 
-  onClickLeftDrawerToggle() {
-    this.store.dispatch(ChatStore.toggleLeftSideDrawer());
+    const minX = rect.left;
+    const maxX = rect.left + rect.width + 5;
+    const minY = rect.top;
+    const maxY = rect.top + rect.height;
+
+    if (
+      event.pageX >= minX &&
+      event.pageX <= maxX &&
+      event.pageY >= minY &&
+      event.pageY <= maxY
+    ) {
+    } else {
+      this.store.dispatch(
+        ChatStore.toggleLeftSideDrawerIndicator({ show: false })
+      );
+    }
   }
 
   async onClickNewChat(type: string = 'NORMAL') {

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

@@ -12,6 +12,15 @@
       ></app-layout-messenger-left-side>
     </mat-drawer>
     <div class="chat-messages">
+      <button
+        mat-icon-button
+        class="left-drawer-toggle"
+        *ngIf="!showLeftDrawer || showLeftDrawerIndicator"
+        (click)="onClickLeftDrawerToggle()"
+      >
+        <mat-icon>settings</mat-icon>
+      </button>
+
       <app-layout-messenger-intro
         *ngIf="!(this.selectedChat$ | async)"
       ></app-layout-messenger-intro>

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

@@ -48,3 +48,8 @@
   flex: 1 1 auto;
   justify-content: space-around;
 }
+
+.left-drawer-toggle {
+  position: absolute;
+  top: calc(50% - 20px);
+}

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

@@ -55,6 +55,9 @@ import { TranslateService } from '@ngx-translate/core';
   styleUrls: ['./main.page.component.scss']
 })
 export class MainPageComponent implements OnInit, OnDestroy {
+  @ViewChild('rightDrawer', { static: true }) rightDrawer: MatDrawer;
+  @ViewChild('leftSideDrawer', { static: true }) leftSideDrawer: MatDrawer;
+
   selectedChat$: Observable<string | null>;
   selectedRightDrawer$: Observable<string | null>;
   idleStateChangedSubscription: Subscription;
@@ -62,6 +65,7 @@ export class MainPageComponent implements OnInit, OnDestroy {
   msgOpenMessageSubscription: Subscription;
   myIdleCheckTimeSubscription: Subscription;
   leftSideDrawerSubscription: Subscription;
+  leftSideDrawerIndicatorSubscription: Subscription;
 
   defaultLeftSideComponentWidth = 380;
   leftSideComponentWidth = this.defaultLeftSideComponentWidth;
@@ -70,8 +74,8 @@ export class MainPageComponent implements OnInit, OnDestroy {
   loginResSubscription: Subscription;
   environmentsInfo: EnvironmentsInfo;
 
-  @ViewChild('rightDrawer', { static: true }) rightDrawer: MatDrawer;
-  @ViewChild('leftSideDrawer', { static: true }) leftSideDrawer: MatDrawer;
+  showLeftDrawer = true;
+  showLeftDrawerIndicator = false;
 
   constructor(
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
@@ -117,6 +121,7 @@ export class MainPageComponent implements OnInit, OnDestroy {
         select(AppStore.MessengerSelector.ChatSelector.selectLeftSideDrawer)
       )
       .subscribe(leftSideDrawer => {
+        this.showLeftDrawer = leftSideDrawer;
         if (leftSideDrawer) {
           this.leftSideDrawer.open();
         } else {
@@ -124,6 +129,16 @@ export class MainPageComponent implements OnInit, OnDestroy {
         }
       });
 
+    this.leftSideDrawerIndicatorSubscription = this.store
+      .pipe(
+        select(
+          AppStore.MessengerSelector.ChatSelector.selectLeftSideDrawerIndicator
+        )
+      )
+      .subscribe(leftSideDrawerIndicator => {
+        this.showLeftDrawerIndicator = leftSideDrawerIndicator;
+      });
+
     this.idleStateChangedSubscription = this.nativeService
       .idleStateChanged()
       .subscribe(action => {
@@ -236,6 +251,10 @@ export class MainPageComponent implements OnInit, OnDestroy {
       this.leftSideDrawerSubscription.unsubscribe();
     }
 
+    if (!!this.leftSideDrawerIndicatorSubscription) {
+      this.leftSideDrawerIndicatorSubscription.unsubscribe();
+    }
+
     this.logger.debug('-----------------------MainPageComponent ngOnDestroy');
   }
 
@@ -411,4 +430,8 @@ export class MainPageComponent implements OnInit, OnDestroy {
   onCloseRightDrawer() {
     this.rightDrawer.close();
   }
+
+  onClickLeftDrawerToggle() {
+    this.store.dispatch(ChatStore.toggleLeftSideDrawer());
+  }
 }

projects/ucap-webmessenger-app/src/app/pages/messenger/messenger.page.module.ts

@@ -3,6 +3,8 @@ import { CommonModule } from '@angular/common';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 import { MatSidenavModule } from '@angular/material/sidenav';
 
 import { AppMessengerLayoutModule } from '@app/layouts/messenger/messenger.layout.module';
@@ -17,13 +19,15 @@ import { AngularSplitModule } from 'angular-split';
   imports: [
     CommonModule,
     FlexLayoutModule,
+    MatButtonModule,
+    MatIconModule,
     MatSidenavModule,
     AppMessengerLayoutModule,
     AppMessengerRoutingPageModule,
 
-    AngularSplitModule.forRoot(),
+    AngularSplitModule.forRoot()
   ],
   declarations: [...COMPONENTS],
-  entryComponents: [],
+  entryComponents: []
 })
 export class AppMessengerPageModule {}

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

@@ -57,3 +57,8 @@ export const clearRightDrawer = createAction(
 export const toggleLeftSideDrawer = createAction(
   '[Messenger::Chat] Toggle Left Side Drawer'
 );
+
+export const toggleLeftSideDrawerIndicator = createAction(
+  '[Messenger::Chat] Toggle Left Side Drawer Indicator',
+  props<{ show: boolean }>()
+);

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

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

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

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