left side drawer is added

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

@@ -1,5 +1,5 @@
-<div class="container">
+<div #leftSideContainer class="container">
-  <div class="left-side-tabs-body">
+  <div fxFlexFill class="left-side-tabs-body">
     <div
       #tabs
       class="left-side-tabs-contents"
@@ -64,3 +64,7 @@
     (buttonClick)="onClickFab($event)"
   ></ucap-float-action-button>
 </div>
+
+<button mat-icon-button class="left-drawer-toggle" *ngIf="showLeftDrawerToggle">
+  <mat-icon>settings</mat-icon>
+</button>

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

@@ -25,7 +25,7 @@
 
 .container {
   display: flex;
-  width: 250px;
+  width: 300px;
   height: 100%;
 }
 
@@ -124,3 +124,8 @@
     height: 100%;
   }
 }
+
+.left-drawer-toggle {
+  position: absolute;
+  top: 0px;
+}

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

@@ -8,7 +8,8 @@ import {
   QueryList,
   ElementRef,
   OnDestroy,
-  ViewChild
+  ViewChild,
+  HostListener
 } from '@angular/core';
 import { NGXLogger } from 'ngx-logger';
 import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
@@ -75,6 +76,9 @@ export class LeftSideComponent implements OnInit, OnDestroy {
   @ViewChild('messageBoxComponent', { static: false })
   messageBoxComponent: MessageBoxComponent;
 
+  @ViewChild('leftSideContainer', { static: false })
+  leftSideContainer: ElementRef<HTMLElement>;
+
   onLangChangeSubscription: Subscription;
 
   badgeChatUnReadCount: number;
@@ -96,6 +100,8 @@ export class LeftSideComponent implements OnInit, OnDestroy {
   loginRes: LoginResponse;
   loginResSubscription: Subscription;
 
+  showLeftDrawerToggle = false;
+
   constructor(
     private store: Store<any>,
     private dialogService: DialogService,
@@ -181,6 +187,31 @@ export class LeftSideComponent implements OnInit, OnDestroy {
     this.logger.debug('-----------------------LeftSideComponent ngOnDestroy');
   }
 
+  @HostListener('mouseenter', ['$event'])
+  mouseOver(event: MouseEvent) {
+    const rect = this.leftSideContainer.nativeElement.getBoundingClientRect();
+
+    const minX = rect.left + rect.width - 5;
+    const maxX = rect.left + rect.width;
+    const minY = rect.top;
+    const maxY = rect.top + rect.height;
+
+    if (
+      event.pageX >= minX &&
+      event.pageX <= maxX &&
+      event.pageY >= minY &&
+      event.pageY <= maxY
+    ) {
+      this.logger.debug('mouseOver edge of container');
+      this.showLeftDrawerToggle = true;
+    }
+  }
+
+  @HostListener('mouseleave', ['$event'])
+  mouseLeave(event: MouseEvent) {
+    this.showLeftDrawerToggle = false;
+  }
+
   async onClickNewChat(type: string = 'NORMAL') {
     const result = await this.dialogService.open<
       CreateChatDialogComponent,