Feature/Restructure resources page (#3978)

* Restructure resources page

* Update changelog

---------

Co-authored-by: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Restructured the resources page
 - Switched the `consistent-generic-constructors` rule from `warn` to `error` in the `eslint` configuration
 - Switched the `consistent-type-assertions` rule from `warn` to `error` in the `eslint` configuration
 - Switched the `prefer-optional-chain` rule from `warn` to `error` in the `eslint` configuration

apps/api/src/assets/sitemap.xml

@@ -214,6 +214,18 @@
     <loc>https://ghostfol.io/en/resources</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/en/resources/glossary</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/en/resources/guides</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/en/resources/markets</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/en/resources/personal-finance-tools</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>

apps/client/src/app/app.component.ts

@@ -183,6 +183,7 @@ export class AppComponent implements OnDestroy, OnInit {
         this.hasTabs =
           (this.currentRoute === this.routerLinkAbout[0].slice(1) ||
             this.currentRoute === this.routerLinkFaq[0].slice(1) ||
+            this.currentRoute === this.routerLinkResources[0].slice(1) ||
             this.currentRoute === 'account' ||
             this.currentRoute === 'admin' ||
             this.currentRoute === 'home' ||
@@ -198,7 +199,6 @@ export class AppComponent implements OnDestroy, OnInit {
             this.currentRoute === 'p' ||
             this.currentRoute === this.routerLinkPricing[0].slice(1) ||
             this.currentRoute === this.routerLinkRegister[0].slice(1) ||
-            this.currentRoute === this.routerLinkResources[0].slice(1) ||
             this.currentRoute === 'start') &&
           this.deviceType !== 'mobile';
 

apps/client/src/app/pages/resources/glossary/resources-glossary-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { ResourcesGlossaryPageComponent } from './resources-glossary.component';
+
+const routes: Routes = [
+  {
+    component: ResourcesGlossaryPageComponent,
+    path: '',
+    title: $localize`Glossary`
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ResourcesGlossaryRoutingModule {}

apps/client/src/app/pages/resources/glossary/resources-glossary.component.html

@@ -0,0 +1,138 @@
+<div class="container">
+  <div class="row">
+    <div class="col">
+      <h1 class="h3 mb-4 text-center" i18n>Glossary</h1>
+      <div>
+        <div class="mb-4 media">
+          <div class="media-body">
+            <h3 class="h5 mt-0">Buy and Hold</h3>
+            <div class="mb-1">
+              Buy and hold is a passive investment strategy where you buy assets
+              and hold them for a long period regardless of fluctuations in the
+              market.
+            </div>
+            <div>
+              <a
+                href="https://www.investopedia.com/terms/b/buyandhold.asp"
+                target="_blank"
+                >Buy and Hold →</a
+              >
+            </div>
+          </div>
+        </div>
+        <div class="mb-4 media">
+          <div class="media-body">
+            <h3 class="h5 mt-0">Deflation</h3>
+            <div class="mb-1">
+              Deflation is a decrease of the general price level for goods and
+              services in an economy over a period of time.
+            </div>
+            <div>
+              <a
+                href="https://www.investopedia.com/terms/d/deflation.asp"
+                target="_blank"
+                >Deflation →</a
+              >
+            </div>
+          </div>
+        </div>
+        <div class="mb-4 media">
+          <div class="media-body">
+            <h3 class="h5 mt-0">Dollar-Cost Averaging (DCA)</h3>
+            <div class="mb-1">
+              Dollar-cost averaging is an investment strategy where you split
+              the total amount to be invested across periodic purchases of a
+              target asset to reduce the impact of volatility on the overall
+              purchase.
+            </div>
+            <div>
+              <a
+                href="https://www.investopedia.com/terms/d/dollarcostaveraging.asp"
+                target="_blank"
+                >Dollar-Cost Averaging →</a
+              >
+            </div>
+          </div>
+        </div>
+        <div class="mb-4 media">
+          <div class="media-body">
+            <h3 class="h5 mt-0">Financial Independence</h3>
+            <div class="mb-1">
+              Financial independence is the status of having enough income, for
+              example with a passive income like dividends, to cover your living
+              expenses for the rest of your life.
+            </div>
+            <div>
+              <a
+                href="https://en.wikipedia.org/wiki/Financial_independence"
+                target="_blank"
+                >Financial Independence →</a
+              >
+            </div>
+          </div>
+        </div>
+        <div class="mb-4 media">
+          <div class="media-body">
+            <h3 class="h5 mt-0">FIRE</h3>
+            <div class="mb-1">
+              FIRE is a movement that promotes saving and investing to achieve
+              financial independence and early retirement.
+            </div>
+            <div>
+              <a href="../en/blog/2023/07/exploring-the-path-to-fire">FIRE →</a>
+            </div>
+          </div>
+        </div>
+        <div class="mb-4 media">
+          <div class="media-body">
+            <h3 class="h5 mt-0">Inflation</h3>
+            <div class="mb-1">
+              Inflation is an increase of the general price level for goods and
+              services in an economy over a period of time.
+            </div>
+            <div>
+              <a
+                href="https://www.investopedia.com/terms/i/inflation.asp"
+                target="_blank"
+                >Inflation →</a
+              >
+            </div>
+          </div>
+        </div>
+        @if (hasPermissionForSubscription) {
+          <div class="mb-4 media">
+            <div class="media-body">
+              <h3 class="h5 mt-0">Personal Finance Tools</h3>
+              <div class="mb-1">
+                Personal finance tools are software applications that help
+                individuals manage their money, track expenses, set budgets,
+                monitor investments, and make informed financial decisions.
+              </div>
+              <div>
+                <a [routerLink]="routerLinkResourcesPersonalFinanceTools"
+                  >Personal Finance Tools →</a
+                >
+              </div>
+            </div>
+          </div>
+        }
+        <div class="mb-4 media">
+          <div class="media-body">
+            <h3 class="h5 mt-0">Stagflation</h3>
+            <div class="mb-1">
+              Stagflation describes a situation in which there is a stagnant
+              economy with high unemployment and high inflation.
+            </div>
+            <div>
+              <a
+                href="https://www.investopedia.com/terms/s/stagflation.asp"
+                target="_blank"
+                >Stagflation →</a
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

apps/client/src/app/pages/resources/glossary/resources-glossary.component.scss

@@ -0,0 +1,17 @@
+:host {
+  color: rgb(var(--dark-primary-text));
+  display: block;
+
+  a {
+    color: rgba(var(--palette-primary-500), 1);
+    font-weight: 500;
+
+    &:hover {
+      color: rgba(var(--palette-primary-300), 1);
+    }
+  }
+}
+
+:host-context(.theme-dark) {
+  color: rgb(var(--light-primary-text));
+}

apps/client/src/app/pages/resources/glossary/resources-glossary.component.ts

@@ -0,0 +1,30 @@
+import { DataService } from '@ghostfolio/client/services/data.service';
+import { InfoItem } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'gf-resources-glossary',
+  styleUrls: ['./resources-glossary.component.scss'],
+  templateUrl: './resources-glossary.component.html'
+})
+export class ResourcesGlossaryPageComponent implements OnInit {
+  public hasPermissionForSubscription: boolean;
+  public info: InfoItem;
+  public routerLinkResourcesPersonalFinanceTools = [
+    '/' + $localize`:snake-case:resources`,
+    'personal-finance-tools'
+  ];
+
+  public constructor(private dataService: DataService) {
+    this.info = this.dataService.fetchInfo();
+  }
+
+  public ngOnInit() {
+    this.hasPermissionForSubscription = hasPermission(
+      this.info?.globalPermissions,
+      permissions.enableSubscription
+    );
+  }
+}

apps/client/src/app/pages/resources/glossary/resources-glossary.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { ResourcesGlossaryRoutingModule } from './resources-glossary-routing.module';
+import { ResourcesGlossaryPageComponent } from './resources-glossary.component';
+
+@NgModule({
+  declarations: [ResourcesGlossaryPageComponent],
+  imports: [CommonModule, ResourcesGlossaryRoutingModule, RouterModule]
+})
+export class ResourcesGlossaryPageModule {}

apps/client/src/app/pages/resources/guides/resources-guides-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { ResourcesGuidesComponent } from './resources-guides.component';
+
+const routes: Routes = [
+  {
+    component: ResourcesGuidesComponent,
+    path: '',
+    title: $localize`Guides`
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ResourcesGuidesRoutingModule {}

apps/client/src/app/pages/resources/guides/resources-guides.component.html

@@ -0,0 +1,40 @@
+<div class="container">
+  <div class="row">
+    <div class="col">
+      <h1 class="h3 mb-4 text-center" i18n>Guides</h1>
+      <div class="mb-5">
+        <div class="mb-4 media">
+          <div class="media-body">
+            <h3 class="h5 mt-0">Boringly Getting Rich</h3>
+            <div class="mb-1">
+              The <i>Boringly Getting Rich</i> guide supports you to get started
+              with investing. It introduces a strategy utilizing a broadly
+              diversified, low-cost portfolio excluding the risks of individual
+              stocks.
+            </div>
+            <div>
+              <a href="https://herget.me/investing-guide" target="_blank"
+                >Boringly Getting Rich →</a
+              >
+            </div>
+          </div>
+        </div>
+        <div class="mb-4 media">
+          <div class="media-body">
+            <h3 class="h5 mt-0">How do I get my finances in order?</h3>
+            <div class="mb-1">
+              Before you can think of long-term investing, you have to get your
+              finances in order. Learn how you can reach your financial goals
+              easier and faster in this guide.
+            </div>
+            <div>
+              <a href="../en/blog/2022/07/how-do-i-get-my-finances-in-order"
+                >How do I get my finances in order? →</a
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

apps/client/src/app/pages/resources/guides/resources-guides.component.scss

@@ -0,0 +1,17 @@
+:host {
+  color: rgb(var(--dark-primary-text));
+  display: block;
+
+  a {
+    color: rgba(var(--palette-primary-500), 1);
+    font-weight: 500;
+
+    &:hover {
+      color: rgba(var(--palette-primary-300), 1);
+    }
+  }
+}
+
+:host-context(.theme-dark) {
+  color: rgb(var(--light-primary-text));
+}

apps/client/src/app/pages/resources/guides/resources-guides.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'gf-resources-guides',
+  styleUrls: ['./resources-guides.component.scss'],
+  templateUrl: './resources-guides.component.html'
+})
+export class ResourcesGuidesComponent {}

apps/client/src/app/pages/resources/guides/resources-guides.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { ResourcesGuidesRoutingModule } from './resources-guides-routing.module';
+import { ResourcesGuidesComponent } from './resources-guides.component';
+
+@NgModule({
+  declarations: [ResourcesGuidesComponent],
+  imports: [CommonModule, ResourcesGuidesRoutingModule, RouterModule]
+})
+export class ResourcesGuidesModule {}

apps/client/src/app/pages/resources/markets/resources-markets-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { ResourcesMarketsComponent } from './resources-markets.component';
+
+const routes: Routes = [
+  {
+    component: ResourcesMarketsComponent,
+    path: '',
+    title: $localize`Markets`
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ResourcesMarketsRoutingModule {}

apps/client/src/app/pages/resources/markets/resources-markets.component.html

@@ -0,0 +1,64 @@
+<div class="container">
+  <h1 class="h3 mb-4 text-center" i18n>Markets</h1>
+  <div class="mb-5">
+    <div class="mb-4 media">
+      <div class="media-body">
+        <h3 class="h5 mt-0">Crypto Coins Heatmap</h3>
+        <div class="mb-1">
+          With the <i>Crypto Coins Heatmap</i> you can track the daily market
+          movements of cryptocurrencies as a visual snapshot.
+        </div>
+        <div>
+          <a href="https://www.tradingview.com/heatmap/crypto" target="_blank"
+            >Crypto Coins Heatmap →</a
+          >
+        </div>
+      </div>
+    </div>
+    <div class="mb-4 media">
+      <div class="media-body">
+        <h3 class="h5 mt-0">Fear & Greed Index</h3>
+        <div class="mb-1">
+          The fear and greed index was developed by <i>CNNMoney</i> to measure
+          the primary emotions (fear and greed) that influence how much
+          investors are willing to pay for stocks.
+        </div>
+        <div>
+          <a href="https://money.cnn.com/data/fear-and-greed/" target="_blank"
+            >Fear & Greed Index →</a
+          >
+        </div>
+      </div>
+    </div>
+    <div class="media">
+      <div class="mb-4 media">
+        <h3 class="h5 mt-0">Inflation Chart</h3>
+        <div class="mb-1">
+          <i>Inflation Chart</i> helps you find the intrinsic value of stock
+          markets, stock prices, goods and services by adjusting them to the
+          amount of the money supply (M0, M1, M2) or price of other goods (food
+          or oil).
+        </div>
+        <div>
+          <a href="https://inflationchart.com" target="_blank"
+            >Inflation Chart →</a
+          >
+        </div>
+      </div>
+    </div>
+    <div class="media">
+      <div class="media-body">
+        <h3 class="h5 mt-0">Stock Heatmap</h3>
+        <div class="mb-1">
+          With the <i>Stock Heatmap</i> you can track the daily market movements
+          of stocks as a visual snapshot.
+        </div>
+        <div>
+          <a href="https://www.tradingview.com/heatmap/stock" target="_blank"
+            >Stock Heatmap →</a
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

apps/client/src/app/pages/resources/markets/resources-markets.component.scss

@@ -0,0 +1,17 @@
+:host {
+  color: rgb(var(--dark-primary-text));
+  display: block;
+
+  a {
+    color: rgba(var(--palette-primary-500), 1);
+    font-weight: 500;
+
+    &:hover {
+      color: rgba(var(--palette-primary-300), 1);
+    }
+  }
+}
+
+:host-context(.theme-dark) {
+  color: rgb(var(--light-primary-text));
+}

apps/client/src/app/pages/resources/markets/resources-markets.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'gf-resources-markets',
+  styleUrls: ['./resources-markets.component.scss'],
+  templateUrl: './resources-markets.component.html'
+})
+export class ResourcesMarketsComponent {}

apps/client/src/app/pages/resources/markets/resources-markets.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { ResourcesMarketsRoutingModule } from './resources-markets-routing.module';
+import { ResourcesMarketsComponent } from './resources-markets.component';
+
+@NgModule({
+  declarations: [ResourcesMarketsComponent],
+  imports: [CommonModule, ResourcesMarketsRoutingModule]
+})
+export class ResourcesMarketsModule {}

apps/client/src/app/pages/resources/overview/resources-overview-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { ResourcesOverviewComponent } from './resources-overview.component';
+
+const routes: Routes = [
+  {
+    component: ResourcesOverviewComponent,
+    path: ''
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ResourcesOverviewRoutingModule {}

apps/client/src/app/pages/resources/overview/resources-overview.component.html

@@ -0,0 +1,16 @@
+<div class="container">
+  <div class="row">
+    <div class="col">
+      <h1 class="h3 mb-4 text-center" i18n>Resources</h1>
+      <div class="overview-list">
+        @for (item of overviewItems; track item) {
+          <div class="mb-4">
+            <h3 class="h5 mt-0">{{ item.title }}</h3>
+            <p class="mb-1">{{ item.description }}</p>
+            <a [routerLink]="item.link">Explore {{ item.title }} →</a>
+          </div>
+        }
+      </div>
+    </div>
+  </div>
+</div>

apps/client/src/app/pages/resources/overview/resources-overview.component.scss

@@ -0,0 +1,17 @@
+:host {
+  color: rgb(var(--dark-primary-text));
+  display: block;
+
+  a {
+    color: rgba(var(--palette-primary-500), 1);
+    font-weight: 500;
+
+    &:hover {
+      color: rgba(var(--palette-primary-300), 1);
+    }
+  }
+}
+
+:host-context(.theme-dark) {
+  color: rgb(var(--light-primary-text));
+}

apps/client/src/app/pages/resources/overview/resources-overview.component.ts

@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'gf-resources-overview',
+  styleUrls: ['./resources-overview.component.scss'],
+  templateUrl: './resources-overview.component.html'
+})
+export class ResourcesOverviewComponent {
+  public overviewItems = [
+    {
+      title: 'Frequently Asked Questions (FAQ)',
+      description:
+        'Find quick answers to commonly asked questions about Ghostfolio in our Frequently Asked Questions (FAQ) section.',
+      link: ['/' + $localize`:snake-case:faq`]
+    },
+    {
+      title: 'Guides',
+      description:
+        'Explore our guides to help you get started with investing and managing your finances.',
+      link: [
+        '/' + $localize`:snake-case:resources`,
+        $localize`:snake-case:guides`
+      ]
+    },
+    {
+      title: 'Markets',
+      description:
+        'Access various market resources and tools to stay informed about financial markets.',
+      link: [
+        '/' + $localize`:snake-case:resources`,
+        $localize`:snake-case:markets`
+      ]
+    },
+    {
+      title: 'Glossary',
+      description:
+        'Learn key financial terms and concepts in our comprehensive glossary.',
+      link: [
+        '/' + $localize`:snake-case:resources`,
+        $localize`:snake-case:glossary`
+      ]
+    }
+  ];
+}

apps/client/src/app/pages/resources/overview/resources-overview.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { ResourcesOverviewRoutingModule } from './resources-overview-routing.module';
+import { ResourcesOverviewComponent } from './resources-overview.component';
+
+@NgModule({
+  declarations: [ResourcesOverviewComponent],
+  imports: [CommonModule, ResourcesOverviewRoutingModule, RouterModule]
+})
+export class ResourcesOverviewModule {}

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

@@ -9,16 +9,46 @@ const routes: Routes = [
   {
     canActivate: [AuthGuard],
     component: ResourcesPageComponent,
+    children: [
+      {
+        path: '',
+        loadChildren: () =>
+          import('./overview/resources-overview.module').then(
+            (m) => m.ResourcesOverviewModule
+          )
+      },
+      {
+        path: $localize`:snake-case:glossary`,
+        loadChildren: () =>
+          import('./glossary/resources-glossary.module').then(
+            (m) => m.ResourcesGlossaryPageModule
+          )
+      },
+      {
+        path: $localize`:snake-case:guides`,
+        loadChildren: () =>
+          import('./guides/resources-guides.module').then(
+            (m) => m.ResourcesGuidesModule
+          )
+      },
+      {
+        path: $localize`:snake-case:markets`,
+        loadChildren: () =>
+          import('./markets/resources-markets.module').then(
+            (m) => m.ResourcesMarketsModule
+          )
+      },
+      ...['personal-finance-tools'].map((path) => ({
+        path,
+        loadChildren: () =>
+          import(
+            './personal-finance-tools/personal-finance-tools-page.module'
+          ).then((m) => m.PersonalFinanceToolsPageModule)
+      }))
+    ],
     path: '',
     title: $localize`Resources`
-  },
-  ...['personal-finance-tools'].map((path) => ({
-    path,
-    loadChildren: () =>
-      import(
-        './personal-finance-tools/personal-finance-tools-page.module'
-      ).then((m) => m.PersonalFinanceToolsPageModule)
-  }))
+  }
 ];
 
 @NgModule({

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

@@ -1,36 +1,44 @@
-import { DataService } from '@ghostfolio/client/services/data.service';
-import { InfoItem } from '@ghostfolio/common/interfaces';
-import { hasPermission, permissions } from '@ghostfolio/common/permissions';
-
 import { Component, OnInit } from '@angular/core';
+import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 
 @Component({
-  host: { class: 'page' },
+  host: { class: 'page has-tabs' },
   selector: 'gf-resources-page',
   styleUrls: ['./resources-page.scss'],
   templateUrl: './resources-page.html'
 })
 export class ResourcesPageComponent implements OnInit {
-  public hasPermissionForSubscription: boolean;
-  public info: InfoItem;
-  public routerLinkFaq = ['/' + $localize`:snake-case:faq`];
-  public routerLinkResourcesPersonalFinanceTools = [
-    '/' + $localize`:snake-case:resources`,
-    'personal-finance-tools'
+  public deviceType: string;
+  public tabs = [
+    {
+      path: '.',
+      label: $localize`Overview`,
+      iconName: 'reader-outline'
+    },
+    {
+      path: 'guides',
+      label: $localize`Guides`,
+      iconName: 'book-outline'
+    },
+    {
+      path: 'markets',
+      label: $localize`Markets`,
+      iconName: 'newspaper-outline'
+    },
+    {
+      path: 'glossary',
+      label: $localize`Glossary`,
+      iconName: 'library-outline'
+    }
   ];
 
   private unsubscribeSubject = new Subject<void>();
 
-  public constructor(private dataService: DataService) {
-    this.info = this.dataService.fetchInfo();
-  }
+  public constructor(private deviceService: DeviceDetectorService) {}
 
   public ngOnInit() {
-    this.hasPermissionForSubscription = hasPermission(
-      this.info?.globalPermissions,
-      permissions.enableSubscription
-    );
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
   }
 
   public ngOnDestroy() {

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

@@ -1,258 +1,30 @@
-<div class="container">
-  <div class="row">
-    <div class="col">
-      <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>Resources</h1>
-      <h2 class="h4 mb-3">Ghostfolio</h2>
-      <div class="mb-5">
-        <div class="mb-4 media">
-          <div class="media-body">
-            <h3 class="h5 mt-0">Frequently Asked Questions (FAQ)</h3>
-            <div class="mb-1">
-              Find quick answers to commonly asked questions about Ghostfolio in
-              our Frequently Asked Questions (FAQ) section.
-            </div>
-            <div>
-              <a [routerLink]="routerLinkFaq"
-                >Frequently Asked Questions (FAQ) →</a
-              >
-            </div>
-          </div>
-        </div>
-      </div>
-      <h2 class="h4 mb-3" i18n>Guides</h2>
-      <div class="mb-5">
-        <div class="mb-4 media">
-          <div class="media-body">
-            <h3 class="h5 mt-0">Boringly Getting Rich</h3>
-            <div class="mb-1">
-              The <i>Boringly Getting Rich</i> guide supports you to get started
-              with investing. It introduces a strategy utilizing a broadly
-              diversified, low-cost portfolio excluding the risks of individual
-              stocks.
-            </div>
-            <div>
-              <a href="https://herget.me/investing-guide" target="_blank"
-                >Boringly Getting Rich →</a
-              >
-            </div>
-          </div>
-        </div>
-        <div class="mb-4 media">
-          <div class="media-body">
-            <h3 class="h5 mt-0">How do I get my finances in order?</h3>
-            <div class="mb-1">
-              Before you can think of long-term investing, you have to get your
-              finances in order. Learn how you can reach your financial goals
-              easier and faster in this guide.
-            </div>
-            <div>
-              <a href="../en/blog/2022/07/how-do-i-get-my-finances-in-order"
-                >How do I get my finances in order? →</a
-              >
-            </div>
-          </div>
-        </div>
-      </div>
-      <h2 class="h4 mb-3" i18n>Markets</h2>
-      <div class="mb-5">
-        <div class="mb-4 media">
-          <div class="media-body">
-            <h3 class="h5 mt-0">Crypto Coins Heatmap</h3>
-            <div class="mb-1">
-              With the <i>Crypto Coins Heatmap</i> you can track the daily
-              market movements of cryptocurrencies as a visual snapshot.
-            </div>
-            <div>
-              <a
-                href="https://www.tradingview.com/heatmap/crypto"
-                target="_blank"
-                >Crypto Coins Heatmap →</a
-              >
-            </div>
-          </div>
-        </div>
-        <div class="mb-4 media">
-          <div class="media-body">
-            <h3 class="h5 mt-0">Fear & Greed Index</h3>
-            <div class="mb-1">
-              The fear and greed index was developed by <i>CNNMoney</i> to
-              measure the primary emotions (fear and greed) that influence how
-              much investors are willing to pay for stocks.
-            </div>
-            <div>
-              <a
-                href="https://money.cnn.com/data/fear-and-greed/"
-                target="_blank"
-                >Fear & Greed Index →</a
-              >
-            </div>
-          </div>
-        </div>
-        <div class="media">
-          <div class="mb-4 media">
-            <h3 class="h5 mt-0">Inflation Chart</h3>
-            <div class="mb-1">
-              <i>Inflation Chart</i> helps you find the intrinsic value of stock
-              markets, stock prices, goods and services by adjusting them to the
-              amount of the money supply (M0, M1, M2) or price of other goods
-              (food or oil).
-            </div>
-            <div>
-              <a href="https://inflationchart.com" target="_blank"
-                >Inflation Chart →</a
-              >
-            </div>
-          </div>
-        </div>
-        <div class="media">
-          <div class="media-body">
-            <h3 class="h5 mt-0">Stock Heatmap</h3>
-            <div class="mb-1">
-              With the <i>Stock Heatmap</i> you can track the daily market
-              movements of stocks as a visual snapshot.
-            </div>
-            <div>
-              <a
-                href="https://www.tradingview.com/heatmap/stock"
-                target="_blank"
-                >Stock Heatmap →</a
-              >
-            </div>
-          </div>
-        </div>
-      </div>
-      <h2 class="h4 mb-3" i18n>Glossary</h2>
-      <div>
-        <div class="mb-4 media">
-          <div class="media-body">
-            <h3 class="h5 mt-0">Buy and Hold</h3>
-            <div class="mb-1">
-              Buy and hold is a passive investment strategy where you buy assets
-              and hold them for a long period regardless of fluctuations in the
-              market.
-            </div>
-            <div>
-              <a
-                href="https://www.investopedia.com/terms/b/buyandhold.asp"
-                target="_blank"
-                >Buy and Hold →</a
-              >
-            </div>
-          </div>
-        </div>
-        <div class="mb-4 media">
-          <div class="media-body">
-            <h3 class="h5 mt-0">Deflation</h3>
-            <div class="mb-1">
-              Deflation is a decrease of the general price level for goods and
-              services in an economy over a period of time.
-            </div>
-            <div>
-              <a
-                href="https://www.investopedia.com/terms/d/deflation.asp"
-                target="_blank"
-                >Deflation →</a
-              >
-            </div>
-          </div>
-        </div>
-        <div class="mb-4 media">
-          <div class="media-body">
-            <h3 class="h5 mt-0">Dollar-Cost Averaging (DCA)</h3>
-            <div class="mb-1">
-              Dollar-cost averaging is an investment strategy where you split
-              the total amount to be invested across periodic purchases of a
-              target asset to reduce the impact of volatility on the overall
-              purchase.
-            </div>
-            <div>
-              <a
-                href="https://www.investopedia.com/terms/d/dollarcostaveraging.asp"
-                target="_blank"
-                >Dollar-Cost Averaging →</a
-              >
-            </div>
-          </div>
-        </div>
-        <div class="mb-4 media">
-          <div class="media-body">
-            <h3 class="h5 mt-0">Financial Independence</h3>
-            <div class="mb-1">
-              Financial independence is the status of having enough income, for
-              example with a passive income like dividends, to cover your living
-              expenses for the rest of your life.
-            </div>
-            <div>
-              <a
-                href="https://en.wikipedia.org/wiki/Financial_independence"
-                target="_blank"
-                >Financial Independence →</a
-              >
-            </div>
-          </div>
-        </div>
-        <div class="mb-4 media">
-          <div class="media-body">
-            <h3 class="h5 mt-0">FIRE</h3>
-            <div class="mb-1">
-              FIRE is a movement that promotes saving and investing to achieve
-              financial independence and early retirement.
-            </div>
-            <div>
-              <a href="../en/blog/2023/07/exploring-the-path-to-fire">FIRE →</a>
-            </div>
-          </div>
-        </div>
-        <div class="mb-4 media">
-          <div class="media-body">
-            <h3 class="h5 mt-0">Inflation</h3>
-            <div class="mb-1">
-              Inflation is an increase of the general price level for goods and
-              services in an economy over a period of time.
-            </div>
-            <div>
-              <a
-                href="https://www.investopedia.com/terms/i/inflation.asp"
-                target="_blank"
-                >Inflation →</a
-              >
-            </div>
-          </div>
-        </div>
-        @if (hasPermissionForSubscription) {
-          <div class="mb-4 media">
-            <div class="media-body">
-              <h3 class="h5 mt-0">Personal Finance Tools</h3>
-              <div class="mb-1">
-                Personal finance tools are software applications that help
-                individuals manage their money, track expenses, set budgets,
-                monitor investments, and make informed financial decisions.
-              </div>
-              <div>
-                <a [routerLink]="routerLinkResourcesPersonalFinanceTools"
-                  >Personal Finance Tools →</a
-                >
-              </div>
-            </div>
-          </div>
-        }
-        <div class="mb-4 media">
-          <div class="media-body">
-            <h3 class="h5 mt-0">Stagflation</h3>
-            <div class="mb-1">
-              Stagflation describes a situation in which there is a stagnant
-              economy with high unemployment and high inflation.
-            </div>
-            <div>
-              <a
-                href="https://www.investopedia.com/terms/s/stagflation.asp"
-                target="_blank"
-                >Stagflation →</a
-              >
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+<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
+  [disablePagination]="true"
+  [tabPanel]="tabPanel"
+>
+  @for (tab of tabs; track tab) {
+    @if (tab.showCondition !== false) {
+      <a
+        #rla="routerLinkActive"
+        class="no-min-width px-3"
+        mat-tab-link
+        routerLinkActive
+        [active]="rla.isActive"
+        [routerLink]="tab.path"
+        [routerLinkActiveOptions]="{ exact: true }"
+      >
+        <ion-icon
+          [name]="tab.iconName"
+          [size]="deviceType === 'mobile' ? 'large' : 'small'"
+        />
+        <div class="d-none d-sm-block ml-2">{{ tab.label }}</div>
+      </a>
+    }
+  }
+</nav>

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

@@ -1,12 +1,19 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatTabsModule } from '@angular/material/tabs';
+import { RouterModule } from '@angular/router';
 
 import { ResourcesPageRoutingModule } from './resources-page-routing.module';
 import { ResourcesPageComponent } from './resources-page.component';
 
 @NgModule({
   declarations: [ResourcesPageComponent],
-  imports: [CommonModule, ResourcesPageRoutingModule],
+  imports: [
+    CommonModule,
+    MatTabsModule,
+    ResourcesPageRoutingModule,
+    RouterModule
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class ResourcesPageModule {}

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

@@ -1,15 +1,5 @@
 :host {
   color: rgb(var(--dark-primary-text));
-  display: block;
-
-  a {
-    color: rgba(var(--palette-primary-500), 1);
-    font-weight: 500;
-
-    &:hover {
-      color: rgba(var(--palette-primary-300), 1);
-    }
-  }
 }
 
 :host-context(.theme-dark) {