setup header, navigation and footer of app

kontor-angular/src/app/app.component.html

@@ -1,5 +1,6 @@
 <div class="app">
   <kontor-header />
+  <app-navigation/>
   <main>
     <router-outlet />
   </main>

kontor-angular/src/app/app.component.ts

@@ -2,10 +2,11 @@ import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { KontorHeaderComponent } from "./kontor/header/header.component";
 import { KontorFooterComponent } from './kontor/footer/footer.component';
+import { NavigationComponent } from "./kontor/navigation/navigation.component";
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, KontorHeaderComponent, KontorFooterComponent],
+  imports: [RouterOutlet, KontorHeaderComponent, KontorFooterComponent, NavigationComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })

kontor-angular/src/app/kontor/footer/footer.component.css

@@ -1,7 +1,10 @@
 /* Footer */
-a {
+.footer {
   padding: 20px;
   text-align: center;
-  background: #ddd;
+  background-color: lightblue;
-  margin-top: 20px;
+}
+
+.footer a {
+  font-size: 20px;
 }

kontor-angular/src/app/kontor/footer/footer.component.html

@@ -1,3 +1,3 @@
-<div>
+<footer class="footer">
   <a href="{{ footerUrl }}">{{ footerLink }}</a>
-</div>
+</footer>

kontor-angular/src/app/kontor/footer/footer.component.ts

@@ -9,5 +9,4 @@ import { Component } from '@angular/core';
 export class KontorFooterComponent {
   footerUrl = "https://kontor.thpeetz.de";
   footerLink = "kontor.thpeetz.de";
-
 }

kontor-angular/src/app/kontor/header/header.component.html

@@ -2,18 +2,4 @@
   <section>
     <h1>{{ title() }}</h1>
   </section>
-  <!-- <nav>
-    <ul>
-      <li><a routerLink="/">Kontor</a></li>
-      <li><a routerLink="/comic">Comics</a></li>
-      <li><a routerLink="/tysc">TradeYourSportsCards</a></li>
-      <li><a routerLink="/media">Media</a></li>
-    </ul>
-  </nav> -->
 </header>
-<div class="topnav">
-  <a routerLink="/" routerLinkActive="active">Kontor</a>
-  <a routerLink="/comic"  routerLinkActive="active">Comics</a>
-  <a routerLink="/tysc"  routerLinkActive="active">TradeYourSportsCards</a>
-  <a routerLink="/media"  routerLinkActive="active">Media</a>
-</div>

kontor-angular/src/app/kontor/navigation/navigation.component.html

@@ -0,0 +1,6 @@
+<div class="topnav">
+  <a routerLink="/" >Kontor</a>
+  <a routerLink="/comic"  routerLinkActive="active">Comics</a>
+  <a routerLink="/tysc"  routerLinkActive="active">TradeYourSportsCards</a>
+  <a routerLink="/media"  routerLinkActive="active">Media</a>
+</div>

kontor-angular/src/app/kontor/navigation/navigation.component.spec.ts

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

kontor-angular/src/app/kontor/navigation/navigation.component.ts

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