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

@@ -1,14 +1,10 @@
 import { Routes } from '@angular/router';
 import { KontorComponent } from './kontor/kontor.component';
 import { Login } from './common/login/login';
-import { ComicOverviewComponent } from './comic/comic-overview/comic-overview.component';
 import { MediaOverviewComponent } from './media/media-overview/media-overview.component';
-import { ArtistListComponent } from './comic/artist/artist-list/artist-list.component';
-import { ComicListComponent } from './comic/comic/comic-list/comic-list.component';
 import { MediaFileListComponent } from './media/media-file/media-file-list/media-file-list.component';
 import { MediaActorListComponent } from './media/media-actor/media-actor-list/media-actor-list.component';
 import { MediaVideoListComponent } from './media/media-video/media-video-list/media-video-list.component';
-import { PublisherListComponent } from './comic/publisher/publisher-list/publisher-list.component';
 import { TyscMenuComponent } from './tysc/tysc-menu/tysc-menu.component';
 import { TeamListComponent } from './tysc/team/team-list/team-list.component';
 import { VendorListComponent } from './tysc/vendor/vendor-list/vendor-list.component';
@@ -16,18 +12,15 @@ import { CardsetListComponent } from './tysc/cardset/cardset-list/cardset-list.c
 import { PositionListComponent } from './tysc/position/position-list/position-list.component';
 import { PlayerListComponent } from './tysc/player/player-list/player-list.component';
 import { SportListComponent } from './tysc/sport/sport-list/sport-list.component';
+import { ComicSectionComponent } from './kontor/comic/comic-section/comic-section.component';
+import { comicRoutes } from './kontor/comic/comic-section/comic-section.routes';
 
 export const routes: Routes = [
   { path: '', component: KontorComponent, },
   { path: 'login', component: Login, },
   {
-    path: 'comic', component: ComicOverviewComponent,
-    children: [
-      { path: '', component: ComicListComponent},
-      { path: 'comics', component: ComicListComponent},
-      { path: 'publisher', component: PublisherListComponent},
-      { path: 'artist', component: ArtistListComponent},
-    ],
+    path: 'comic', component: ComicSectionComponent,
+    children: comicRoutes,
   },
   {
     path: 'tysc', component: TyscMenuComponent,

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

@@ -0,0 +1,5 @@
+<div class="subnav">
+  <a routerLink="/comic/comics" routerLinkActive="active">Comics</a>
+  <a routerLink="/comic/publisher" routerLinkActive="active">Publisher</a>
+  <a routerLink="/comic/artist" routerLinkActive="active">Artists</a>
+</div>

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

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

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

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

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

@@ -0,0 +1,2 @@
+<app-comic-navigation />
+<router-outlet></router-outlet>

kontor-angular/src/app/kontor/comic/comic-section/comic-section.component.spec.ts

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

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

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { ComicNavigationComponent } from "../comic-navigation/comic-navigation.component";
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-comic-section',
+  imports: [ComicNavigationComponent, RouterOutlet],
+  templateUrl: './comic-section.component.html',
+  styleUrl: './comic-section.component.css'
+})
+export class ComicSectionComponent {
+
+}

kontor-angular/src/app/kontor/comic/comic-section/comic-section.routes.ts

@@ -0,0 +1,19 @@
+import { Routes } from "@angular/router";
+import { ComicListComponent } from "../../../comic/comic/comic-list/comic-list.component";
+import { PublisherListComponent } from "../../../comic/publisher/publisher-list/publisher-list.component";
+import { ArtistListComponent } from "../../../comic/artist/artist-list/artist-list.component";
+
+export const comicRoutes: Routes = [
+    {
+        path: 'comics', 
+        component: ComicListComponent
+    },
+    { 
+        path: 'publisher', 
+        component: PublisherListComponent
+    },
+    { 
+        path: 'artist', 
+        component: ArtistListComponent
+    },    
+];