bug fixed

src/app/layouts/components/default.layout.component.html

@@ -1,6 +1,7 @@
 <div fxFlexFill class="layout-container">
   <div class="navi-container">
     <mat-tab-group
+      #navTabGroup
       vertical
       disablePagination="true"
       (selectedTabChange)="onSelectedTabChange($event)"

src/app/layouts/components/default.layout.component.ts

@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
 
-import { MatTabChangeEvent } from '@angular/material/tabs';
+import { MatTabChangeEvent, MatTabGroup } from '@angular/material/tabs';
 import { MatSidenav } from '@angular/material/sidenav';
 
 import { Store, select } from '@ngrx/store';
@@ -20,12 +20,17 @@ import { LogService } from '@ucap/ng-logger';
 import { AppSelector } from '@app/store/state';
 import { UCAP_PATH_PARAM } from '@app/types/tokens';
 
+const NAVS = ['/group', '/chat', '/organization', '/message'];
+
 @Component({
   selector: 'app-layouts-default',
   templateUrl: './default.layout.component.html',
   styleUrls: ['./default.layout.component.scss']
 })
 export class DefaultLayoutComponent implements OnInit, OnDestroy {
+  @ViewChild('navTabGroup', { static: true })
+  navTabGroup: MatTabGroup;
+
   @ViewChild('leftSidenav', { static: true })
   leftSidenav: MatSidenav;
 
@@ -45,7 +50,6 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
   ) {
     this.routerEventSubscription = this.router.events.subscribe((event) => {
       if (event instanceof NavigationEnd) {
-        this.logService.debug('DefaultLayoutComponent', event);
         this.onRoute(event.url);
       }
     });
@@ -65,6 +69,8 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
           }
         }
       });
+
+    this.onRoute(this.router.url);
   }
 
   ngOnDestroy(): void {
@@ -77,24 +83,11 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
   }
 
   onSelectedTabChange(event: MatTabChangeEvent) {
-    switch (event.index) {
-      case 1:
-        this.router.navigate(['/chat']);
-        break;
-      case 2:
-        this.router.navigate(['/organization']);
-        break;
-      case 3:
-        this.router.navigate(['/message']);
-        break;
-      default:
-        this.router.navigate(['/group']);
-        break;
-    }
+    this.router.navigate([NAVS[event.index]]);
   }
 
   onRoute(url: string) {
-    this.logService.debug('onRoute', url);
+    this.navTabGroup.selectedIndex = NAVS.findIndex((v) => url.startsWith(v));
 
     this.sidenavInjector = Injector.create({
       providers: [{ provide: UCAP_PATH_PARAM, useValue: 'sidenav' }],

src/app/pages/organization/components/sidenav.page.component.html

@@ -1,3 +1,3 @@
 <div fxFlexFill>
-  sidenav page of ogranization is works!
+  sidenav page of ogranization is works!!!!
 </div>