Migrate tabs to Angular Material 15

apps/client/src/app/components/admin-overview/admin-overview.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <div class="mb-5 row">
+  <div class="row">
     <div class="col">
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>

apps/client/src/app/components/home-overview/home-overview.scss

@@ -2,6 +2,7 @@
 
 :host {
   display: block;
+  height: 100%;
 
   .chart-container {
     aspect-ratio: 16 / 9;

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

@@ -30,7 +30,7 @@
       [queryParams]="{ createDialog: true }"
       [routerLink]="[]"
     >
-      <ion-icon class="mt-2" name="add-outline" size="large"></ion-icon>
+      <ion-icon name="add-outline" size="large"></ion-icon>
     </a>
   </div>
 </div>

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

@@ -1,14 +1,16 @@
+<mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
   <router-outlet></router-outlet>
+</mat-tab-nav-panel>
 
-<nav mat-align-tabs="center" mat-tab-nav-bar>
+<nav mat-align-tabs="center" mat-tab-nav-bar [tabPanel]="tabPanel">
   <a
+    #rla="routerLinkActive"
     *ngFor="let link of [
       { iconName: 'reader-outline', path: 'overview' },
       { iconName: 'people-outline', path: 'users' },
       { iconName: 'server-outline', path: 'market-data' },
       { iconName: 'flash-outline', path: 'jobs' }
     ]"
-    #rla="routerLinkActive"
     mat-tab-link
     routerLinkActive
     [active]="rla.isActive"

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

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 import { GfAdminJobsModule } from '@ghostfolio/client/components/admin-jobs/admin-jobs.module';
 import { GfAdminMarketDataModule } from '@ghostfolio/client/components/admin-market-data/admin-market-data.module';
 import { GfAdminOverviewModule } from '@ghostfolio/client/components/admin-overview/admin-overview.module';

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

@@ -19,19 +19,10 @@
       overflow-y: auto;
     }
 
-    .mat-tab-header {
+    .mat-mdc-tab-link-container {
-      border-bottom: 0;
+      --mdc-tab-indicator-active-indicator-color: transparent;
 
-      .mat-ink-bar {
+      .mat-mdc-tab-link {
-        visibility: hidden !important;
-      }
-
-      .mat-tab-label-active {
-        color: rgba(var(--palette-primary-500), 1);
-        opacity: 1;
-      }
-
-      .mat-tab-link {
         &:hover {
           opacity: 0.75;
         }

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

@@ -1,9 +1,11 @@
+<mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
   <router-outlet></router-outlet>
+</mat-tab-nav-panel>
 
-<nav mat-align-tabs="center" mat-tab-nav-bar>
+<nav mat-align-tabs="center" mat-tab-nav-bar [tabPanel]="tabPanel">
   <a
-    *ngFor="let tab of tabs"
     #rla="routerLinkActive"
+    *ngFor="let tab of tabs"
     mat-tab-link
     routerLinkActive
     [active]="rla.isActive"

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

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
 import { GfHomeHoldingsModule } from '@ghostfolio/client/components/home-holdings/home-holdings.module';
 import { GfHomeMarketModule } from '@ghostfolio/client/components/home-market/home-market.module';

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

@@ -19,19 +19,10 @@
       overflow-y: auto;
     }
 
-    .mat-tab-header {
+    .mat-mdc-tab-link-container {
-      border-bottom: 0;
+      --mdc-tab-indicator-active-indicator-color: transparent;
 
-      .mat-ink-bar {
+      .mat-mdc-tab-link {
-        visibility: hidden !important;
-      }
-
-      .mat-tab-label-active {
-        color: rgba(var(--palette-primary-500), 1);
-        opacity: 1;
-      }
-
-      .mat-tab-link {
         &:hover {
           opacity: 0.75;
         }

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

@@ -32,7 +32,7 @@
       [queryParams]="{ createDialog: true }"
       [routerLink]="[]"
     >
-      <ion-icon class="mt-2" name="add-outline" size="large"></ion-icon>
+      <ion-icon name="add-outline" size="large"></ion-icon>
     </a>
   </div>
 </div>

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

@@ -1,6 +1,8 @@
+<mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
   <router-outlet></router-outlet>
+</mat-tab-nav-panel>
 
-<nav mat-align-tabs="center" mat-tab-nav-bar>
+<nav mat-align-tabs="center" mat-tab-nav-bar [tabPanel]="tabPanel">
   <a
     #rla="routerLinkActive"
     *ngFor="let tab of tabs"

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

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
 
 import { PortfolioPageRoutingModule } from './portfolio-page-routing.module';

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

@@ -20,26 +20,13 @@
       overflow-y: auto;
     }
 
-    .mat-tab-header {
+    .mat-mdc-tab-link-container {
-      border-bottom: 0;
+      --mdc-tab-indicator-active-indicator-color: transparent;
 
-      .mat-ink-bar {
+      .mat-mdc-tab-link {
-        visibility: hidden !important;
-      }
-
-      .mat-tab-label-active {
-        color: rgba(var(--palette-primary-500), 1);
-        opacity: 1;
-      }
-
-      .mat-tab-link {
         &:hover {
           opacity: 0.75;
         }
-
-        @media (max-width: 599px) {
-          min-width: unset;
-        }
       }
     }
   }

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

@@ -1,9 +1,11 @@
+<mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
   <router-outlet></router-outlet>
+</mat-tab-nav-panel>
 
-<nav mat-align-tabs="center" mat-tab-nav-bar>
+<nav mat-align-tabs="center" mat-tab-nav-bar [tabPanel]="tabPanel">
   <a
-    *ngFor="let tab of tabs"
     #rla="routerLinkActive"
+    *ngFor="let tab of tabs"
     mat-tab-link
     routerLinkActive
     [active]="rla.isActive"

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

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
 import { GfHomeHoldingsModule } from '@ghostfolio/client/components/home-holdings/home-holdings.module';
 import { GfHomeOverviewModule } from '@ghostfolio/client/components/home-overview/home-overview.module';

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

@@ -17,19 +17,10 @@
       overflow-y: auto;
     }
 
-    .mat-tab-header {
+    .mat-mdc-tab-link-container {
-      border-bottom: 0;
+      --mdc-tab-indicator-active-indicator-color: transparent;
 
-      .mat-ink-bar {
+      .mat-mdc-tab-link {
-        visibility: hidden !important;
-      }
-
-      .mat-tab-label-active {
-        color: rgba(var(--palette-primary-500), 1);
-        opacity: 1;
-      }
-
-      .mat-tab-link {
         &:hover {
           opacity: 0.75;
         }