frontend/src/app/app-routing.module.ts

@@ -4,11 +4,13 @@ import {AppComponent} from "./app.component";
 import {AdminDashboardComponent} from "./admin-dashboard/admin-dashboard.component";
 import {MainComponent} from "./main/main.component";
 import {UserSettingsComponent} from "./user-settings/user-settings.component";
+import {TaskgroupDashboardComponent} from "./taskgroups/taskgroup-dashboard/taskgroup-dashboard.component";
 
 const routes: Routes = [
   {path: '', component: MainComponent},
   {path: 'admin', component: AdminDashboardComponent},
-  {path: 'user/settings', component: UserSettingsComponent}
+  {path: 'user/settings', component: UserSettingsComponent},
+  {path: 'taskgroups', component: TaskgroupDashboardComponent}
 ];
 
 @NgModule({

frontend/src/app/app.component.html

@@ -1,5 +1,10 @@
 <mat-toolbar color="primary">
-  <span>Spring Angular Demo</span>
+  <span>TimeManager</span>
+
+  <button mat-button aria-label="Organize" *ngIf="authService.hasKey" [matMenuTriggerFor]="organizeMenu">Organize &#9662;</button>
+  <mat-menu #organizeMenu=matMenu>
+    <button mat-menu-item routerLink="taskgroups/" aria-label="Task groups">Taskgroups</button>
+  </mat-menu>
   <span class="example-spacer"></span>
 
 

frontend/src/app/app.module.ts

@@ -36,6 +36,7 @@ import { DeleteAccountComponent } from './user-settings/account-settings/delete-
 import { RegistrationComponent } from './auth/registration/registration.component';
 import { SettingsComponent } from './admin-dashboard/settings/settings.component';
 import {MatListModule} from "@angular/material/list";
+import { TaskgroupDashboardComponent } from './taskgroups/taskgroup-dashboard/taskgroup-dashboard.component';
 
 @NgModule({
   declarations: [
@@ -52,7 +53,8 @@ import {MatListModule} from "@angular/material/list";
     ManageEmailComponent,
     DeleteAccountComponent,
     RegistrationComponent,
-    SettingsComponent
+    SettingsComponent,
+    TaskgroupDashboardComponent
   ],
   imports: [
     BrowserModule,

frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.html

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

frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.spec.ts

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

frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-taskgroup-dashboard',
+  templateUrl: './taskgroup-dashboard.component.html',
+  styleUrls: ['./taskgroup-dashboard.component.css']
+})
+export class TaskgroupDashboardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}