Add navbar

src/app/app.component.html

@@ -1,2 +1,17 @@
 <app-toast-container aria-live="polite" aria-atomic="true"/>
+<nav class="navbar navbar-expand-sm bg-body-secondary">
+  <div class="container-fluid">
+    <button class="navbar-toggler" type="button" (click)="isMenuCollapsed = !isMenuCollapsed">&#9776;</button>
+    <div [ngbCollapse]="isMenuCollapsed" class="collapse navbar-collapse">
+      <ul class="navbar-nav">
+        @for (route of routes; track $index;) {
+          @if (route.component !== undefined) {<li class="nav-item">
+            <a class="nav-link text-capitalize" [routerLink]="route.path" routerLinkActive="active"
+               (click)="isMenuCollapsed = true">{{route.path}}</a>
+          </li>}
+        }
+      </ul>
+    </div>
+  </div>
+</nav>
 <router-outlet/>

src/app/app.component.ts

@@ -1,13 +1,17 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
 import {ToastContainerComponent} from '../components/toast-container/toast-container/toast-container.component';
+import {NgbCollapse} from '@ng-bootstrap/ng-bootstrap';
+import {routes} from './app.routes';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, ToastContainerComponent],
+  imports: [RouterOutlet, ToastContainerComponent, NgbCollapse, RouterLink, RouterLinkActive],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
 export class AppComponent {
   title = 'untitled';
+  isMenuCollapsed: boolean = true;
+  protected readonly routes = routes;
 }