Improve tab navigations

apps/client/src/app/pages/about/about-page-routing.module.ts

@@ -8,9 +8,8 @@ const routes: Routes = [
   {
     canActivate: [AuthGuard],
     children: [
-      { path: '', redirectTo: 'overview', pathMatch: 'full' },
       {
-        path: 'overview',
+        path: '',
         loadChildren: () =>
           import('./overview/about-overview-page.module').then(
             (m) => m.AboutOverviewPageModule

apps/client/src/app/pages/about/about-page.component.ts

@@ -27,7 +27,7 @@ export class AboutPageComponent implements OnDestroy, OnInit {
   public tabs: {
     iconName: string;
     label: string;
-    path: string;
+    path: string[];
     showCondition?: boolean;
   }[] = [];
   public user: User;
@@ -54,17 +54,17 @@ export class AboutPageComponent implements OnDestroy, OnInit {
             {
               iconName: 'reader-outline',
               label: $localize`About`,
-              path: 'overview'
+              path: ['/about']
             },
             {
               iconName: 'sparkles-outline',
               label: $localize`Changelog & License`,
-              path: 'changelog'
+              path: ['/about', 'changelog']
             },
             {
               iconName: 'shield-checkmark-outline',
               label: $localize`Privacy Policy`,
-              path: 'privacy-policy',
+              path: ['/about', 'privacy-policy'],
               showCondition: this.hasPermissionForSubscription
             }
           ];

apps/client/src/app/pages/about/about-page.html

@@ -12,6 +12,7 @@
       routerLinkActive
       [active]="rla.isActive"
       [routerLink]="tab.path"
+      [routerLinkActiveOptions]="{ exact: true }"
     >
       <ion-icon size="large" [name]="tab.iconName"></ion-icon>
       <div class="d-none d-sm-block ml-2">{{ tab.label }}</div>

apps/client/src/app/pages/admin/admin-page-routing.module.ts

@@ -13,18 +13,17 @@ const routes: Routes = [
   {
     canActivate: [AuthGuard],
     children: [
-      { path: '', redirectTo: 'overview', pathMatch: 'full' },
+      {
+        path: '',
+        component: AdminOverviewComponent,
+        title: $localize`Admin Control`
+      },
       { path: 'jobs', component: AdminJobsComponent, title: $localize`Jobs` },
       {
         path: 'market-data',
         component: AdminMarketDataComponent,
         title: $localize`Market Data`
       },
-      {
-        path: 'overview',
-        component: AdminOverviewComponent,
-        title: $localize`Admin Control`
-      },
       {
         path: 'settings',
         component: AdminSettingsComponent,

apps/client/src/app/pages/admin/admin-page.component.ts

@@ -16,7 +16,7 @@ export class AdminPageComponent implements OnDestroy, OnInit {
   public tabs: {
     iconName: string;
     label: string;
-    path: string;
+    path: string[];
     showCondition?: boolean;
   }[] = [];
 
@@ -33,20 +33,28 @@ export class AdminPageComponent implements OnDestroy, OnInit {
       {
         iconName: 'reader-outline',
         label: $localize`Overview`,
-        path: 'overview'
+        path: ['/admin']
       },
       {
         iconName: 'settings-outline',
         label: $localize`Settings`,
-        path: 'settings'
+        path: ['/admin', 'settings']
       },
       {
         iconName: 'server-outline',
         label: $localize`Market Data`,
-        path: 'market-data'
+        path: ['/admin', 'market-data']
       },
-      { iconName: 'flash-outline', label: $localize`Jobs`, path: 'jobs' },
-      { iconName: 'people-outline', label: $localize`Users`, path: 'users' }
+      {
+        iconName: 'flash-outline',
+        label: $localize`Jobs`,
+        path: ['/admin', 'jobs']
+      },
+      {
+        iconName: 'people-outline',
+        label: $localize`Users`,
+        path: ['/admin', 'users']
+      }
     ];
   }
 

apps/client/src/app/pages/admin/admin-page.html

@@ -12,6 +12,7 @@
       routerLinkActive
       [active]="rla.isActive"
       [routerLink]="tab.path"
+      [routerLinkActiveOptions]="{ exact: true }"
     >
       <ion-icon size="large" [name]="tab.iconName"></ion-icon>
       <div class="d-none d-sm-block ml-2">{{ tab.label }}</div>

apps/client/src/app/pages/home/home-page-routing.module.ts

@@ -12,9 +12,8 @@ const routes: Routes = [
   {
     canActivate: [AuthGuard],
     children: [
-      { path: '', redirectTo: 'overview', pathMatch: 'full' },
       {
-        path: 'overview',
+        path: '',
         component: HomeOverviewComponent
       },
       {

apps/client/src/app/pages/home/home-page.component.ts

@@ -28,7 +28,7 @@ export class HomePageComponent implements OnDestroy, OnInit {
   public tabs: {
     iconName: string;
     label: string;
-    path: string;
+    path: string[];
     showCondition?: boolean;
   }[] = [];
   public user: User;
@@ -50,17 +50,17 @@ export class HomePageComponent implements OnDestroy, OnInit {
             {
               iconName: 'analytics-outline',
               label: $localize`Overview`,
-              path: 'overview'
+              path: ['/home']
             },
             {
               iconName: 'wallet-outline',
               label: $localize`Holdings`,
-              path: 'holdings'
+              path: ['/home', 'holdings']
             },
             {
               iconName: 'reader-outline',
               label: $localize`Summary`,
-              path: 'summary'
+              path: ['/home', 'summary']
             }
           ];
           this.user = state.user;
@@ -80,7 +80,7 @@ export class HomePageComponent implements OnDestroy, OnInit {
             this.tabs.push({
               iconName: 'newspaper-outline',
               label: $localize`Markets`,
-              path: 'market'
+              path: ['/home', 'market']
             });
           }
 

apps/client/src/app/pages/home/home-page.html

@@ -12,6 +12,7 @@
       routerLinkActive
       [active]="rla.isActive"
       [routerLink]="tab.path"
+      [routerLinkActiveOptions]="{ exact: true }"
     >
       <ion-icon size="large" [name]="tab.iconName"></ion-icon>
       <div class="d-none d-sm-block ml-2">{{ tab.label }}</div>

apps/client/src/app/pages/portfolio/portfolio-page-routing.module.ts

@@ -8,9 +8,8 @@ const routes: Routes = [
   {
     canActivate: [AuthGuard],
     children: [
-      { path: '', redirectTo: 'analysis', pathMatch: 'full' },
       {
-        path: 'analysis',
+        path: '',
         loadChildren: () =>
           import('./analysis/analysis-page.module').then(
             (m) => m.AnalysisPageModule

apps/client/src/app/pages/portfolio/portfolio-page.component.ts

@@ -27,7 +27,7 @@ export class PortfolioPageComponent implements OnDestroy, OnInit {
   public tabs: {
     iconName: string;
     label: string;
-    path: string;
+    path: string[];
     showCondition?: boolean;
   }[] = [];
   public user: User;
@@ -49,27 +49,27 @@ export class PortfolioPageComponent implements OnDestroy, OnInit {
             {
               iconName: 'analytics-outline',
               label: $localize`Analysis`,
-              path: 'analysis'
+              path: ['/portfolio']
             },
             {
               iconName: 'wallet-outline',
               label: $localize`Holdings`,
-              path: 'holdings'
+              path: ['/portfolio', 'holdings']
             },
             {
               iconName: 'swap-vertical-outline',
               label: $localize`Activities`,
-              path: 'activities'
+              path: ['/portfolio', 'activities']
             },
             {
               iconName: 'pie-chart-outline',
               label: $localize`Allocations`,
-              path: 'allocations'
+              path: ['/portfolio', 'allocations']
             },
             {
               iconName: 'calculator-outline',
               label: 'FIRE / X-ray',
-              path: 'fire'
+              path: ['/portfolio', 'fire']
             }
           ];
           this.user = state.user;

apps/client/src/app/pages/portfolio/portfolio-page.html

@@ -12,6 +12,7 @@
       routerLinkActive
       [active]="rla.isActive"
       [routerLink]="tab.path"
+      [routerLinkActiveOptions]="{ exact: true }"
     >
       <ion-icon size="large" [name]="tab.iconName"></ion-icon>
       <div class="d-none d-sm-block ml-2">{{ tab.label }}</div>

apps/client/src/app/pages/zen/zen-page-routing.module.ts

@@ -10,8 +10,7 @@ const routes: Routes = [
   {
     canActivate: [AuthGuard],
     children: [
-      { path: '', redirectTo: 'overview', pathMatch: 'full' },
-      { path: 'overview', component: HomeOverviewComponent },
+      { path: '', component: HomeOverviewComponent },
       { path: 'holdings', component: HomeHoldingsComponent }
     ],
     component: ZenPageComponent,

apps/client/src/app/pages/zen/zen-page.component.ts

@@ -21,7 +21,7 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
   public tabs: {
     iconName: string;
     label: string;
-    path: string;
+    path: string[];
     showCondition?: boolean;
   }[] = [];
   public user: User;
@@ -42,12 +42,12 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
             {
               iconName: 'analytics-outline',
               label: $localize`Overview`,
-              path: 'overview'
+              path: ['/zen']
             },
             {
               iconName: 'wallet-outline',
               label: $localize`Holdings`,
-              path: 'holdings'
+              path: ['/zen', 'holdings']
             }
           ];
           this.user = state.user;

apps/client/src/app/pages/zen/zen-page.html

@@ -12,6 +12,7 @@
       routerLinkActive
       [active]="rla.isActive"
       [routerLink]="tab.path"
+      [routerLinkActiveOptions]="{ exact: true }"
     >
       <ion-icon size="large" [name]="tab.iconName"></ion-icon>
       <div class="d-none d-sm-block ml-2">{{ tab.label }}</div>