added components

src/app/app.routes.ts

@@ -3,10 +3,16 @@ import { SummaryComponent } from './components/summary/summary.component';
 import { HelpComponent } from './shared/components/help/help.component';
 import { ImprintComponent } from './shared/components/imprint/imprint.component';
 import { PrivacyPolicyComponent } from './shared/components/privacy-policy/privacy-policy.component';
+import { AddTaskComponent } from './components/add-task/add-task.component';
+import { BoardComponent } from './components/board/board.component';
+import { ContactsComponent } from './components/contacts/contacts.component';
 
 export const routes: Routes = [
   { path: '', component: SummaryComponent },
   { path: 'summary', component: SummaryComponent },
+  { path: 'add-task', component: AddTaskComponent },
+  { path: 'board', component: BoardComponent },
+  { path: 'contacts', component: ContactsComponent },
   { path: 'help', component: HelpComponent },
   { path: 'imprint', component: ImprintComponent },
   { path: 'privacy-policy', component: PrivacyPolicyComponent },

src/app/components/add-task/add-task.component.html

@@ -0,0 +1 @@
+<p>add-task works!</p>

src/app/components/add-task/add-task.component.spec.ts

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

src/app/components/add-task/add-task.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-add-task',
+  standalone: true,
+  imports: [],
+  templateUrl: './add-task.component.html',
+  styleUrl: './add-task.component.scss'
+})
+export class AddTaskComponent {
+
+}

src/app/components/board/board.component.html

@@ -0,0 +1 @@
+<p>board works!</p>

src/app/components/board/board.component.spec.ts

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

src/app/components/board/board.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-board',
+  standalone: true,
+  imports: [],
+  templateUrl: './board.component.html',
+  styleUrl: './board.component.scss'
+})
+export class BoardComponent {
+
+}

src/app/components/contacts/contacts.component.html

@@ -0,0 +1 @@
+<p>contacts works!</p>

src/app/components/contacts/contacts.component.spec.ts

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

src/app/components/contacts/contacts.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-contacts',
+  standalone: true,
+  imports: [],
+  templateUrl: './contacts.component.html',
+  styleUrl: './contacts.component.scss'
+})
+export class ContactsComponent {
+
+}

src/app/shared/components/sidebar/sidebar.component.html

@@ -17,8 +17,9 @@
     <div
       id="navLinkAddTask"
       class="nav-links-inner"
+      routerLink="add-task"
       [ngClass]="{
-        active: currentPath == 'addtask'
+        active: currentPath == 'add-task'
       }"
     >
       <img src="./assets/img/sidebar/add-task.svg" alt="addtask" /><span
@@ -28,6 +29,7 @@
     <div
       id="navLinkBoard"
       class="nav-links-inner"
+      routerLink="board"
       [ngClass]="{
         active: currentPath == 'board'
       }"
@@ -37,6 +39,7 @@
     <div
       id="navLinkContacts"
       class="nav-links-inner"
+      routerLink="contacts"
       [ngClass]="{
         active: currentPath == 'contacts'
       }"

src/app/shared/components/sidebar/sidebar.component.ts

@@ -15,10 +15,13 @@ export class SidebarComponent {
   constructor(private router: Router) {}
 
   ngOnInit(): void {
+    this.getCurrentPath();
+  }
+
+  getCurrentPath() {
     this.router.events.subscribe((event) => {
       if (event instanceof NavigationEnd) {
         this.currentPath = this.router.url.substring(1);
-        console.log(this.currentPath);
       }
     });
   }