updated the navbar component content

src/app/layout/masterpage/masterpage.component.html

@@ -1 +1,15 @@
-<p>masterpage works!</p>
+<header>
+    <nav>
+       <app-navbar></app-navbar>
+    </nav>
+    <section class="carousel-container">
+        carousel goes here...
+    </section>
+</header>
+<main>
+
+</main>
+<footer>
+    Footer goes here...
+</footer>
+<router-outlet/>

src/app/layout/masterpage/masterpage.component.ts

@@ -1,8 +1,10 @@
 import { Component } from '@angular/core';
+import { NavbarComponent } from "../navbar/navbar.component";
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-masterpage',
-  imports: [],
+  imports: [NavbarComponent, RouterOutlet],
   templateUrl: './masterpage.component.html',
   styleUrl: './masterpage.component.scss'
 })

src/app/layout/navbar/navbar.component.html

@@ -0,0 +1,3 @@
+<a routerLink="/">Home</a>  | 
+<a routerLink="/about-us">About Us</a>
+<router-outlet/>

src/app/layout/navbar/navbar.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarComponent } from './navbar.component';
+
+describe('NavbarComponent', () => {
+  let component: NavbarComponent;
+  let fixture: ComponentFixture<NavbarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NavbarComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NavbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/layout/navbar/navbar.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-navbar',
+  imports: [RouterLink, RouterOutlet ],
+  templateUrl: './navbar.component.html',
+  styleUrl: './navbar.component.scss'
+})
+export class NavbarComponent {
+
+}