Restore top toolbar from bootstrap because is more responsive --

material toolbar in design

src/app/app.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar color="primary" class="sticky-top mat-toolbar">
+<!-- <mat-toolbar color="primary" class="sticky-top mat-toolbar">
   <mat-toolbar-row>
     <div class="col-left">
       <button mat-icon-button class="flag-button" (click)="switchLanguage(translate.currentLang === 'pl' ? 'en' : 'pl')">
@@ -20,9 +20,36 @@
       <button mat-button class="toolbar-item" [routerLink]="'/friendly-pages'">{{ 'topBar.friendlyPages' | translate }}</button>
     </div>
   </mat-toolbar-row>
-</mat-toolbar>
+</mat-toolbar> -->
 
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
+  <div class="me-auto col-auto">
+    <a class="navbar-brand ms-2">
+      <a 
+        class="navbar-brand ms-2" 
+        role="button"
+        tabindex="0"
+        (click)="switchLanguage( translate.currentLang === 'pl' ? 'en' : 'pl' )"
+        (keydown)="handleKeyDown($event)">
+        <img 
+          loading="lazy" 
+          class="border border-dark" 
+          height="25" 
+          src= "/flag-icons-main/flags/4x3/{{ translate.currentLang === 'pl' ? 'us' : 'pl'  }}.svg"
+          alt="Switch language"
+        >
+    </a>
       
+    </a>
+  </div>
+  <div class="container d-flex justify-content-between align-items-center">
+     <!-- Navbar links -->
+      <a class="navbar-brand"  [routerLink]="'/about-me'">{{ 'topBar.aboutMe' | translate }}</a>  
+      <a class="navbar-brand" [routerLink]="'/asset-calculator'">{{ 'topBar.depreciationCalculator' | translate }}</a>  
+      <a class="navbar-brand" [routerLink]="'/quotes'">{{ 'topBar.courses' | translate }}</a>
+      <a class="navbar-brand" [routerLink]="'/friendly-pages'">{{ 'topBar.friendlyPages' | translate }}</a>
+  </div>
+</nav>
 
   <router-outlet></router-outlet>