How to make an Ionic component persist between components

I am using Ionic to build a program that has a few components. On start-up, the program opens a login component, and then when the user is logged in, it redirects to my home component.

I have a 'navigation' component which is a navigation bar that redirects to multiple components, but when I select a page to navigate to, the navigation bar disappears. How do I make it persist across components?

Find attached my app.routes.ts, my navigation.page.html and my navigation.page.ts.

navigation.page.html:

<ion-content fullscreen="true">
  <ion-header translucent="true">
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-button (click)="signOut()">
          <ion-icon name="power-outline"></ion-icon>
          <ion-label>Sign Out</ion-label>
        </ion-button>
      </ion-buttons>
      <div class="ion-text-center">
        <ion-title>Finance Manager</ion-title>
      </div>
      <ion-buttons slot="end">
        <ion-button href="/profile">
          <ion-icon name="person-circle-outline"></ion-icon>
          <ion-label>Account</ion-label>
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>

  <ion-segment scrollable value="1">
    <ion-segment-button routerLink="/home" value="1">
      <ion-label>Home</ion-label>
    </ion-segment-button>
    <ion-segment-button routerLink="/transactions" value="2">
      <ion-label>Transactions</ion-label>
    </ion-segment-button>
    <ion-segment-button routerLink="/budgeting" value="3">
      <ion-label>Budgeting</ion-label>
    </ion-segment-button>
    <ion-segment-button routerLink="/reports" value="4">
      <ion-label>Reports</ion-label>
    </ion-segment-button>
  </ion-segment>

</ion-content>

navigation.page.ts:

import { Component, inject } from '@angular/core';
import {
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonButton,
  IonIcon,
  IonTabs,
  IonTabBar,
  IonTabButton,
  IonLabel,
  IonSegment,
  IonSegmentButton,
  IonButtons,
} from '@ionic/angular/standalone';
import { Router, RouterLink, RouterOutlet } from '@angular/router';
import { powerOutline, personCircleOutline } from 'ionicons/icons';
import { addIcons } from 'ionicons';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-navigation',
  templateUrl: 'navigation.page.html',
  styleUrls: ['navigation.page.scss'],
  standalone: true,
  imports: [
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonButton,
    IonIcon,
    IonTabs,
    IonTabBar,
    IonTabButton,
    IonLabel,
    IonSegment,
    IonSegmentButton,
    IonButtons,
    RouterLink,
    RouterOutlet,
    RouterModule
  ],
})
export class NavigationPage {
  private router = inject(Router);

  constructor() {
    addIcons({
      powerOutline,
      personCircleOutline,
    });
  }

  async signOut() {
    this.router.navigateByUrl('/login', { replaceUrl: true });
  }
}

and finally, app.routes.ts:

import { Routes } from '@angular/router';


export const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full',
  },
  {
    path: 'login',
    loadComponent: () => import('./login/login.page').then((m) => m.LoginPage),
  },
  {
  path: 'navigation',
    loadComponent: () => import('./navigation/navigation.page').then((m) => m.NavigationPage),
  },
  {
    path: 'home',
    loadComponent: () => import('./home/home.page').then((m) => m.HomePage),
  },
  {
    path: 'transactions',
    loadComponent: () =>
      import('./transactions/transactions.page').then((m) => m.TransactionsPage),
  },
  {
    path: 'budgeting',
    loadComponent: () =>
      import('./budgeting/budgeting.page').then((m) => m.BudgetingPage),
  },
  {
    path: 'reports',
    loadComponent: () =>
      import('./reports/reports.page').then((m) => m.ReportsPage),
  },
  {
    path: 'settings',
    loadComponent: () =>
      import('./settings/settings.page').then((m) => m.SettingsPage),
  },
];


/*{ path: 'products', component: ProductListComponent },
  {
    path: 'products/:id',
    canActivate: [ProductDetailGuard],
    component: ProductDetailComponent
  }*/

thanks