From acd8abed0976c239260dd584db4f904fbe44d369 Mon Sep 17 00:00:00 2001
From: leejinho <lilis7575@gmail.com>
Date: Tue, 21 Jan 2020 13:32:10 +0900
Subject: [PATCH] left section conversion to drawer

---
 .../app/layouts/messenger/components/index.ts |   2 +
 .../components/left-nav.component.html        | 127 +++++++++++++
 .../components/left-nav.component.scss        | 125 ++++++++++++
 .../components/left-nav.component.spec.ts     |  24 +++
 .../components/left-nav.component.ts          | 116 ++++++++++++
 .../components/left-side.component.html       | 178 +-----------------
 .../components/left-side.component.scss       |   3 +-
 .../components/left-side.component.ts         |  35 ++--
 .../components/main.page.component.html       |  96 ++++------
 .../app/store/messenger/settings/actions.ts   |   6 +
 .../app/store/messenger/settings/reducers.ts  |  21 ++-
 .../src/app/store/messenger/settings/state.ts |  13 +-
 .../src/app/types/index.ts                    |   1 +
 .../src/app/types/main-menu.type.ts           |   8 +
 14 files changed, 499 insertions(+), 256 deletions(-)
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.html
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.scss
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.spec.ts
 create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.ts
 create mode 100644 projects/ucap-webmessenger-app/src/app/types/main-menu.type.ts

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/index.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/index.ts
index 17ab1479..17c0e49b 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/index.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/index.ts
@@ -1,4 +1,5 @@
 import { IntroComponent } from './intro.component';
+import { LeftNaviComponent } from './left-nav.component';
 import { LeftSideComponent } from './left-side.component';
 import { MessagesComponent } from './messages.component';
 import { RightSideComponent } from './right-side.component';
@@ -9,6 +10,7 @@ import { RIGHT_DRAWER_COMPONENTS } from './right-drawer';
 
 export const COMPONENTS = [
   IntroComponent,
+  LeftNaviComponent,
   LeftSideComponent,
   MessagesComponent,
   RightSideComponent,
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.html
new file mode 100644
index 00000000..03a8bba4
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.html
@@ -0,0 +1,127 @@
+<div class="container">
+  <mat-tab-group
+    mat-stretch-tabs
+    animationDuration="0ms"
+    (selectedTabChange)="onSelectedTabChange($event)"
+    class="global-menu"
+  >
+    <mat-tab [aria-label]="MainMenu.Group">
+      <ng-template mat-tab-label>
+        <!--<mat-icon>group</mat-icon>-->
+        <div
+          class="icon-item"
+          matTooltip="{{ 'group.label' | translate }}"
+          matTooltipPosition="after"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="butt"
+            stroke-linejoin="round"
+          >
+            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+            <circle cx="12" cy="7" r="4"></circle>
+          </svg>
+        </div>
+      </ng-template>
+    </mat-tab>
+    <mat-tab [aria-label]="MainMenu.Chat">
+      <ng-template mat-tab-label>
+        <div
+          class="icon-item"
+          [matBadgeHidden]="badgeChatUnReadCount <= 0"
+          [matBadge]="badgeChatUnReadCount"
+          matBadgeDescription="{{
+            'chat.badgeDescriptionForUnread' | translate
+          }}"
+          matBadgeColor="accent"
+          matBadgePosition="above after"
+          matTooltip="{{ 'chat.label' | translate }}"
+          matTooltipPosition="after"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#000000"
+            stroke-width="1.5"
+            stroke-linecap="butt"
+            stroke-linejoin="bevel"
+          >
+            <path
+              d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
+            ></path>
+          </svg>
+        </div>
+      </ng-template>
+    </mat-tab>
+    <mat-tab [aria-label]="MainMenu.Organization">
+      <ng-template mat-tab-label>
+        <div
+          class="icon-item"
+          matTooltip="{{ 'organization.chart' | translate }}"
+          matTooltipPosition="after"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#000000"
+            stroke-width="1.5"
+            stroke-linecap="butt"
+            stroke-linejoin="bevel"
+          >
+            <circle class="st0" cx="18.4" cy="18.5" r="3" />
+            <circle class="st0" cx="12" cy="5" r="3" />
+            <path class="st0" d="M12.4,10.5h4c1.1,0,2,0.9,2,2v3" />
+            <circle class="st0" cx="6.1" cy="18.5" r="3" />
+            <path class="st0" d="M6.1,15.5v-3c0-1.1,0.9-2,2-2h4" />
+            <line class="st0" x1="12" y1="8" x2="12" y2="9" />
+          </svg>
+        </div>
+      </ng-template>
+    </mat-tab>
+
+    <mat-tab [aria-label]="MainMenu.Message">
+      <ng-template mat-tab-label>
+        <div
+          class="icon-item"
+          [matBadgeHidden]="(badgeMessageUnReadCount$ | async) <= 0"
+          [matBadge]="badgeMessageUnReadCount$ | async"
+          matBadgeDescription="{{
+            'message.badgeDescriptionForUnread' | translate
+          }}"
+          matBadgeColor="accent"
+          matBadgePosition="above after"
+          matTooltip="{{ 'message.label' | translate }}"
+          matTooltipPosition="after"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#000000"
+            stroke-width="1.5"
+            stroke-linecap="butt"
+            stroke-linejoin="bevel"
+          >
+            <polygon
+              points="21.368 12.001 3 21.609 3 14 11 12 3 9.794 3 2.394"
+            />
+          </svg>
+        </div>
+      </ng-template>
+    </mat-tab>
+  </mat-tab-group>
+</div>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.scss
new file mode 100644
index 00000000..0d0b4c8e
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.scss
@@ -0,0 +1,125 @@
+::ng-deep .mat-tab-label,
+::ng-deep .mat-tab-label-active {
+  min-width: 0 !important;
+}
+
+::ng-deep .mat-tab-body-wrapper,
+::ng-deep .mat-tab-body {
+  height: 100%;
+  width: 100%;
+}
+::ng-deep .mat-tab-header {
+  border-bottom: none !important;
+  width: 100%;
+}
+
+.left-side-tabs-body {
+  position: relative;
+  height: 100%;
+  div[id^='tabs'] {
+    height: 100%;
+    width: 100%;
+    position: relative;
+  }
+}
+
+.container {
+  display: flex;
+  height: 100%;
+}
+
+.mat-tab-group {
+  display: flex;
+  flex-direction: row;
+}
+
+.myprofile {
+  position: absolute;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  height: 80px;
+  width: 68px;
+  bottom: 10px;
+  color: #ffffff;
+  font-size: 11px;
+  text-align: center;
+  z-index: 1;
+  cursor: pointer;
+}
+
+::ng-deep .organization-side {
+  flex-direction: column;
+  height: 100%;
+}
+::ng-deep .global-menu {
+  .mat-tab-label-container {
+    .mat-tab-list {
+      .mat-tab-labels {
+        flex-flow: column;
+        height: 360px;
+        padding-top: 10px;
+        border-bottom: none;
+        .mat-tab-label {
+          width: 100%;
+          height: 80px;
+          padding: 0;
+        }
+      }
+      .mat-ink-bar {
+        background-color: none;
+        height: 0;
+      }
+    }
+  }
+}
+.left-group-side {
+  position: relative;
+  height: 100%;
+}
+
+::ng-deep .mat-tab-label {
+  .mat-tab-label-content {
+    .icon-item {
+      background: var(--white);
+      border-radius: 4px;
+      display: inline-flex;
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      justify-content: center;
+      align-items: center;
+      transform: scale(0.9);
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0, 1);
+
+      svg {
+        width: 24px;
+        height: 24px;
+        stroke: #ffffff;
+        stroke-width: 1.5;
+        stroke-linecap: square;
+        stroke-linejoin: miter;
+        fill: none;
+      }
+      .mat-badge-content {
+        right: -4px !important;
+      }
+    }
+  }
+  &[aria-selected='true'] {
+    opacity: 1;
+    .mat-tab-label-content {
+      .icon-item {
+        transform: scale(1);
+      }
+    }
+  }
+}
+
+::ng-deep .ps {
+  .ps-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.spec.ts
new file mode 100644
index 00000000..26d5d3e2
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LeftNaviComponent } from './left-nav.component';
+
+describe('App::Layout::Messenger::LeftNaviComponent', () => {
+  let component: LeftNaviComponent;
+  let fixture: ComponentFixture<LeftNaviComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [LeftNaviComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LeftNaviComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.ts
new file mode 100644
index 00000000..ff44f3f2
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.ts
@@ -0,0 +1,116 @@
+import { UserSelectDialogType } from '../../../types/userselect.dialog.type';
+import {
+  Component,
+  OnInit,
+  Output,
+  EventEmitter,
+  ViewChildren,
+  QueryList,
+  ElementRef,
+  OnDestroy,
+  ViewChild
+} from '@angular/core';
+import { NGXLogger } from 'ngx-logger';
+import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
+import {
+  CreateChatDialogComponent,
+  CreateChatDialogData,
+  CreateChatDialogResult
+} from '@app/layouts/messenger/dialogs/chat/create-chat.dialog.component';
+import { Subscription, Observable, merge } from 'rxjs';
+import { Store, select } from '@ngrx/store';
+
+import * as AppStore from '@app/store';
+import * as ChatStore from '@app/store/messenger/chat';
+import * as MessageStore from '@app/store/messenger/message';
+import * as SyncStore from '@app/store/messenger/sync';
+import * as SettingsStore from '@app/store/messenger/settings';
+import { UserInfo } from '@ucap-webmessenger/protocol-sync';
+import {
+  UserInfoSS,
+  UserInfoF,
+  UserInfoDN
+} from '@ucap-webmessenger/protocol-query';
+import { MatTabChangeEvent } from '@angular/material';
+import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
+import { OpenProfileOptions } from '@ucap-webmessenger/protocol-buddy';
+import { SessionStorageService } from '@ucap-webmessenger/web-storage';
+import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
+import { MessageType } from '@ucap-webmessenger/api-message';
+import { tap } from 'rxjs/operators';
+import {
+  MessageWriteDialogComponent,
+  MessageWriteDialogResult,
+  MessageWriteDialogData
+} from '../dialogs/message/message-write.dialog.component';
+import {
+  EnvironmentsInfo,
+  KEY_ENVIRONMENTS_INFO,
+  KEY_VER_INFO,
+  MainMenu
+} from '@app/types';
+import { MessageBoxComponent } from './left-sidenav/message.component';
+import { environment } from '../../../../environments/environment';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-layout-messenger-left-nav',
+  templateUrl: './left-nav.component.html',
+  styleUrls: ['./left-nav.component.scss'],
+  animations: ucapAnimations
+})
+export class LeftNaviComponent implements OnInit, OnDestroy {
+  badgeChatUnReadCount: number;
+  badgeChatUnReadCountSubscription: Subscription;
+  badgeMessageUnReadCount$: Observable<number>;
+  badgeMessageInterval: any;
+
+  MainMenu = MainMenu;
+
+  constructor(private store: Store<any>, private logger: NGXLogger) {}
+
+  ngOnInit() {
+    this.badgeChatUnReadCountSubscription = this.store
+      .pipe(
+        select(AppStore.MessengerSelector.SyncSelector.selectChatUnreadCount)
+      )
+      .subscribe(count => {
+        this.badgeChatUnReadCount = count;
+      });
+
+    /** About Message Badge */
+    this.badgeMessageUnReadCount$ = this.store.pipe(
+      select(AppStore.MessengerSelector.MessageSelector.unReadMessageCount)
+    );
+
+    this.getMessageUnreadCount();
+    this.badgeMessageInterval = setInterval(
+      () => this.getMessageUnreadCount(),
+      5 * 60 * 1000
+    );
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.badgeChatUnReadCountSubscription) {
+      this.badgeChatUnReadCountSubscription.unsubscribe();
+    }
+
+    if (!!this.badgeMessageInterval) {
+      clearInterval(this.badgeMessageInterval);
+    }
+
+    this.logger.debug('-----------------------LeftNaviComponent ngOnDestroy');
+  }
+
+  onSelectedTabChange(event: MatTabChangeEvent) {
+    this.store.dispatch(
+      SettingsStore.selectedGnbMenuIndex({
+        menuIndex: event.tab.ariaLabel as MainMenu
+      })
+    );
+  }
+
+  getMessageUnreadCount(): void {
+    this.store.dispatch(MessageStore.retrieveUnreadCount({}));
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
index 5ce5889d..a308f7b7 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
@@ -1,167 +1,9 @@
 <div class="container">
-  <mat-tab-group
-    mat-stretch-tabs
-    animationDuration="0ms"
-    (selectedTabChange)="onSelectedTabChange($event)"
-    class="global-menu"
-  >
-    <mat-tab [aria-label]="MainMenu.Group">
-      <ng-template mat-tab-label>
-        <!--<mat-icon>group</mat-icon>-->
-        <div
-          class="icon-item"
-          matTooltip="{{ 'group.label' | translate }}"
-          matTooltipPosition="after"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="butt"
-            stroke-linejoin="round"
-          >
-            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
-            <circle cx="12" cy="7" r="4"></circle>
-          </svg>
-        </div>
-      </ng-template>
-    </mat-tab>
-    <mat-tab [aria-label]="MainMenu.Chat">
-      <ng-template mat-tab-label>
-        <div
-          class="icon-item"
-          [matBadgeHidden]="badgeChatUnReadCount <= 0"
-          [matBadge]="badgeChatUnReadCount"
-          matBadgeDescription="{{
-            'chat.badgeDescriptionForUnread' | translate
-          }}"
-          matBadgeColor="accent"
-          matBadgePosition="above after"
-          matTooltip="{{ 'chat.label' | translate }}"
-          matTooltipPosition="after"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="#000000"
-            stroke-width="1.5"
-            stroke-linecap="butt"
-            stroke-linejoin="bevel"
-          >
-            <path
-              d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
-            ></path>
-          </svg>
-        </div>
-      </ng-template>
-    </mat-tab>
-    <mat-tab [aria-label]="MainMenu.Organization">
-      <ng-template mat-tab-label>
-        <!--<mat-icon>device_hub</mat-icon>-->
-        <div
-          class="icon-item"
-          matTooltip="{{ 'organization.chart' | translate }}"
-          matTooltipPosition="after"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="#000000"
-            stroke-width="1.5"
-            stroke-linecap="butt"
-            stroke-linejoin="bevel"
-          >
-            <circle class="st0" cx="18.4" cy="18.5" r="3" />
-            <circle class="st0" cx="12" cy="5" r="3" />
-            <path class="st0" d="M12.4,10.5h4c1.1,0,2,0.9,2,2v3" />
-            <circle class="st0" cx="6.1" cy="18.5" r="3" />
-            <path class="st0" d="M6.1,15.5v-3c0-1.1,0.9-2,2-2h4" />
-            <line class="st0" x1="12" y1="8" x2="12" y2="9" />
-          </svg>
-        </div>
-      </ng-template>
-    </mat-tab>
-
-    <mat-tab [aria-label]="MainMenu.Message">
-      <ng-template mat-tab-label>
-        <!--<mat-icon>device_hub</mat-icon>-->
-        <div
-          class="icon-item"
-          [matBadgeHidden]="(badgeMessageUnReadCount$ | async) <= 0"
-          [matBadge]="badgeMessageUnReadCount$ | async"
-          matBadgeDescription="{{
-            'message.badgeDescriptionForUnread' | translate
-          }}"
-          matBadgeColor="accent"
-          matBadgePosition="above after"
-          matTooltip="{{ 'message.label' | translate }}"
-          matTooltipPosition="after"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="#000000"
-            stroke-width="1.5"
-            stroke-linecap="butt"
-            stroke-linejoin="bevel"
-          >
-            <polygon
-              points="21.368 12.001 3 21.609 3 14 11 12 3 9.794 3 2.394"
-            />
-          </svg>
-        </div>
-      </ng-template>
-    </mat-tab>
-
-    <!-- <mat-tab [aria-label]="MainMenu.Call">
-      <ng-template mat-tab-label>
-        <div class="icon-item" matTooltip="Call" matTooltipPosition="after">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="feather feather-phone"
-          >
-            <path
-              class="st0"
-              d="M2,5.8c0.1-0.6,0.3-1.1,0.7-1.6l1.7-1.7C4.7,2.2,5,2.1,5.3,2.1c0.3,0,0.6,0.1,0.8,0.4c0.3,0.3,0.6,0.6,0.9,0.9
-                  		c0.2,0.2,0.3,0.3,0.5,0.5l1.4,1.4c0.3,0.3,0.4,0.6,0.4,0.9S9.2,6.7,8.9,7C8.8,7.2,8.6,7.3,8.5,7.5C8.1,7.9,7.7,8.3,7.2,8.7
-                  		c0,0,0,0,0,0C6.8,9.1,6.9,9.5,7,9.7c0,0,0,0,0,0c0.4,0.9,0.9,1.7,1.6,2.6c1.4,1.7,2.9,3,4.5,4.1c0.2,0.1,0.4,0.2,0.6,0.3
-                  		c0.2,0.1,0.4,0.2,0.5,0.3c0,0,0,0,0.1,0c0.2,0.1,0.3,0.1,0.4,0.1c0.4,0,0.6-0.2,0.7-0.3l1.7-1.7c0.3-0.3,0.6-0.4,0.8-0.4
-                  		c0.4,0,0.6,0.2,0.8,0.4l2.8,2.8c0.6,0.6,0.6,1.2,0,1.7c-0.2,0.2-0.4,0.4-0.6,0.6c-0.3,0.3-0.7,0.6-1,1c-0.5,0.6-1.2,0.8-2,0.8
-                  		c-0.1,0-0.2,0-0.2,0c-1.5-0.1-2.9-0.7-4-1.2c-2.9-1.4-5.4-3.4-7.5-5.9C4.5,13,3.3,11.1,2.6,9C2.1,7.7,1.9,6.7,2,5.8z"
-            ></path>
-          </svg>
-        </div>
-      </ng-template>
-    </mat-tab> -->
-  </mat-tab-group>
-
   <div class="left-side-tabs-body">
     <div
       #tabs
-      id="tabs-0"
       class="left-side-tabs-contents"
-      style="display: block;"
+      [style.display]="MainMenu.Group === currentTabLable ? 'block' : 'none'"
     >
       <app-layout-chat-left-sidenav-group
         class="left-group-side"
@@ -171,19 +13,17 @@
     </div>
     <div
       #tabs
-      id="tabs-1"
       class="left-side-tabs-contents"
-      style="display: none;"
+      [style.display]="MainMenu.Chat === currentTabLable ? 'block' : 'none'"
     >
-      <app-layout-chat-left-sidenav-chat
-        [isVisible]="currentTabLable === MainMenu.Chat"
-      ></app-layout-chat-left-sidenav-chat>
+      <app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
     </div>
     <div
       #tabs
-      id="tabs-2"
       class="left-side-tabs-contents"
-      style="display: none;"
+      [style.display]="
+        MainMenu.Organization === currentTabLable ? 'block' : 'none'
+      "
     >
       <app-layout-chat-left-sidenav-organization
         [selectedUserList]="selectedUserList"
@@ -200,9 +40,8 @@
     </div>
     <div
       #tabs
-      id="tabs-3"
       class="left-side-tabs-contents"
-      style="display: none;"
+      [style.display]="MainMenu.Message === currentTabLable ? 'block' : 'none'"
     >
       <app-layout-chat-left-sidenav-message
         #messageBoxComponent
@@ -212,9 +51,8 @@
     </div>
     <div
       #tabs
-      id="tabs-4"
       class="left-side-tabs-contents"
-      style="display: none;"
+      [style.display]="MainMenu.Call === currentTabLable ? 'block' : 'none'"
     >
       <app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
     </div>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
index 0d0b4c8e..aa0c0b02 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
@@ -16,7 +16,7 @@
 .left-side-tabs-body {
   position: relative;
   height: 100%;
-  div[id^='tabs'] {
+  div.left-side-tabs-contents {
     height: 100%;
     width: 100%;
     position: relative;
@@ -25,6 +25,7 @@
 
 .container {
   display: flex;
+  width: 250px;
   height: 100%;
 }
 
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
index a88558d5..4031c616 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
@@ -45,21 +45,13 @@ import {
 import {
   EnvironmentsInfo,
   KEY_ENVIRONMENTS_INFO,
-  KEY_VER_INFO
+  KEY_VER_INFO,
+  MainMenu
 } from '@app/types';
 import { MessageBoxComponent } from './left-sidenav/message.component';
 import { environment } from '../../../../environments/environment';
 import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
 
-export enum MainMenu {
-  Group = 'GROUP',
-  Chat = 'CAHT',
-  Organization = 'ORGANIZATION',
-  Message = 'MESSAGE',
-  Call = 'CALL',
-  Conversation = 'CONVERSATION'
-}
-
 @Component({
   selector: 'app-layout-messenger-left-side',
   templateUrl: './left-side.component.html',
@@ -159,6 +151,16 @@ export class LeftSideComponent implements OnInit, OnDestroy {
     ).subscribe(() => {
       this.setFabInitial(this.currentTabLable);
     });
+
+    this.loginResSubscription = this.store
+      .pipe(
+        select(AppStore.MessengerSelector.SettingsSelector.gnbMenuIndex),
+        tap(menuIndex => {
+          this.currentTabLable = menuIndex;
+          this.setFabInitial(menuIndex);
+        })
+      )
+      .subscribe();
   }
 
   ngOnDestroy(): void {
@@ -295,19 +297,6 @@ export class LeftSideComponent implements OnInit, OnDestroy {
     this.sendSms.emit(calleeNumber);
   }
 
-  onSelectedTabChange(event: MatTabChangeEvent) {
-    this.setFabInitial(event.tab.ariaLabel);
-    this.currentTabLable = event.tab.ariaLabel;
-
-    this.tabs.forEach(tab => {
-      if (`tabs-${event.index}` === tab.nativeElement.id) {
-        tab.nativeElement.style.display = 'block';
-      } else {
-        tab.nativeElement.style.display = 'none';
-      }
-    });
-  }
-
   setFabInitial(type: string) {
     switch (type) {
       case MainMenu.Group:
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 ca8fa846..9e46be73 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
@@ -1,62 +1,44 @@
 <div class="main-container">
-  <as-split
-    unit="pixel"
-    gutterSize="5"
-    useTransition="true"
-    gutterDblClickDuration="300"
-    (dragEnd)="onGutterDragEnd($event)"
-    (gutterDblClick)="onGutterDblClick($event)"
-  >
-    <as-split-area
-      #asSplitLeft
-      [size]="leftSideComponentWidth"
-      minSize="300"
-      maxSize="500"
-      class="split-area"
+  <div class="left-side">
+    <app-layout-messenger-left-nav> </app-layout-messenger-left-nav>
+  </div>
+
+  <mat-drawer-container class="contents" autosize>
+    <mat-drawer #drawer mode="side" opened>
+      <app-layout-messenger-left-side
+        (openProfile)="onClickOpenProfile($event)"
+        (sendCall)="sendClickToCall($event)"
+        (sendSms)="openSms($event)"
+      ></app-layout-messenger-left-side>
+    </mat-drawer>
+    <div class="chat-messages">
+      <app-layout-messenger-intro
+        *ngIf="!(this.selectedChat$ | async)"
+      ></app-layout-messenger-intro>
+      <!-- <app-layout-messenger-intro
+        *ngIf="!(this.selectedChat$ | async)"
+      ></app-layout-messenger-intro> -->
+      <app-layout-messenger-messages
+        *ngIf="!!(this.selectedChat$ | async)"
+        (openProfile)="onClickOpenProfile($event)"
+        (closeRightDrawer)="onCloseRightDrawer()"
+      ></app-layout-messenger-messages>
+    </div>
+    <mat-drawer
+      #rightDrawer
+      mode="side"
+      position="end"
+      (openedChange)="onOpenedChange($event)"
+      class="rightDrawer"
     >
-      <div class="left-side">
-        <app-layout-messenger-left-side
-          (openProfile)="onClickOpenProfile($event)"
-          (sendCall)="sendClickToCall($event)"
-          (sendSms)="openSms($event)"
-        ></app-layout-messenger-left-side>
-      </div>
-    </as-split-area>
-    <as-split-area size="*">
-      <mat-drawer-container class="contents" autosize>
-        <!-- <mat-drawer #drawer mode="over">
-          <p>Auto-resizing sidenav</p>
-        </mat-drawer> -->
-        <div class="chat-messages">
-          <app-layout-messenger-intro
-            *ngIf="!(this.selectedChat$ | async)"
-          ></app-layout-messenger-intro>
-          <!-- <app-layout-messenger-intro
-            *ngIf="!(this.selectedChat$ | async)"
-          ></app-layout-messenger-intro> -->
-          <app-layout-messenger-messages
-            *ngIf="!!(this.selectedChat$ | async)"
-            (openProfile)="onClickOpenProfile($event)"
-            (closeRightDrawer)="onCloseRightDrawer()"
-          ></app-layout-messenger-messages>
-        </div>
-        <mat-drawer
-          #rightDrawer
-          mode="side"
-          position="end"
-          (openedChange)="onOpenedChange($event)"
-          class="rightDrawer"
-        >
-          <app-layout-messenger-right-drawer
-            [selectedRightDrawer]="selectedRightDrawer$ | async"
-            (openProfile)="onClickOpenProfile($event)"
-            (closeRightDrawer)="onCloseRightDrawer()"
-          >
-          </app-layout-messenger-right-drawer>
-        </mat-drawer>
-      </mat-drawer-container>
-    </as-split-area>
-  </as-split>
+      <app-layout-messenger-right-drawer
+        [selectedRightDrawer]="selectedRightDrawer$ | async"
+        (openProfile)="onClickOpenProfile($event)"
+        (closeRightDrawer)="onCloseRightDrawer()"
+      >
+      </app-layout-messenger-right-drawer>
+    </mat-drawer>
+  </mat-drawer-container>
 
   <!-- <div class="right-side">
     <app-layout-messenger-right-side></app-layout-messenger-right-side>
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/settings/actions.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/actions.ts
index f75be40d..39bfea96 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/settings/actions.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/actions.ts
@@ -1,3 +1,9 @@
 import { createAction, props } from '@ngrx/store';
+import { MainMenu } from '@app/types';
 
 export const showDialog = createAction('[Messenger::Settings] Show Dialog');
+
+export const selectedGnbMenuIndex = createAction(
+  '[Messenger::Settings] select Gnb MenuIndex',
+  props<{ menuIndex: MainMenu }>()
+);
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/settings/reducers.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/reducers.ts
index 3e8db1d9..f522d410 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/settings/reducers.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/reducers.ts
@@ -1,4 +1,21 @@
-import { createReducer } from '@ngrx/store';
+import { createReducer, on } from '@ngrx/store';
 import { initialState } from './state';
+import { selectedGnbMenuIndex } from './actions';
 
-export const reducer = createReducer(initialState);
+import * as AuthenticationStore from '@app/store/account/authentication';
+
+export const reducer = createReducer(
+  initialState,
+  on(selectedGnbMenuIndex, (state, action) => {
+    return {
+      ...state,
+      gnbMenuIndex: action.menuIndex
+    };
+  }),
+
+  on(AuthenticationStore.logoutInitialize, (state, action) => {
+    return {
+      ...initialState
+    };
+  })
+);
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/settings/state.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/state.ts
index 5856c359..76c20e33 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/settings/state.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/state.ts
@@ -1,11 +1,18 @@
 import { Selector, createSelector } from '@ngrx/store';
 import { StatusBulkInfo } from '@ucap-webmessenger/protocol-status';
 import { EntityState, createEntityAdapter } from '@ngrx/entity';
+import { MainMenu } from '@app/types';
 
-export interface State {}
+export interface State {
+  gnbMenuIndex: MainMenu;
+}
 
-export const initialState: State = {};
+export const initialState: State = {
+  gnbMenuIndex: MainMenu.Group
+};
 
 export function selectors<S>(selector: Selector<any, State>) {
-  return {};
+  return {
+    gnbMenuIndex: createSelector(selector, (state: State) => state.gnbMenuIndex)
+  };
 }
diff --git a/projects/ucap-webmessenger-app/src/app/types/index.ts b/projects/ucap-webmessenger-app/src/app/types/index.ts
index 58bf1862..de7ab474 100644
--- a/projects/ucap-webmessenger-app/src/app/types/index.ts
+++ b/projects/ucap-webmessenger-app/src/app/types/index.ts
@@ -2,6 +2,7 @@ export * from './auth-info.type';
 export * from './environment.type';
 export * from './login-info.type';
 export * from './logout-info.type';
+export * from './main-menu.type';
 export * from './userselect.dialog.type';
 export * from './right-drawer.type';
 export * from './sticker-info.type';
diff --git a/projects/ucap-webmessenger-app/src/app/types/main-menu.type.ts b/projects/ucap-webmessenger-app/src/app/types/main-menu.type.ts
new file mode 100644
index 00000000..6557deda
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/types/main-menu.type.ts
@@ -0,0 +1,8 @@
+export enum MainMenu {
+  Group = 'GROUP',
+  Chat = 'CAHT',
+  Organization = 'ORGANIZATION',
+  Message = 'MESSAGE',
+  Call = 'CALL',
+  Conversation = 'CONVERSATION'
+}