Add side menu for header.

frontend/src/app/components/header/header.component.html

@@ -1,5 +1,5 @@
 <div>
-    <button type="button">
+    <button type="button" (click)="sideMenu.open()">
         <mat-icon>menu</mat-icon>
     </button>
     <a [routerLink]="['/home']">
@@ -20,4 +20,5 @@
     <ng-template #anonymousRightMenu>
         <a [routerLink]="['/login']">Login</a>
     </ng-template>
-</div>
+</div>
+<app-side-menu #sideMenu></app-side-menu>

frontend/src/app/components/header/header.component.scss

@@ -90,4 +90,8 @@ $headerHeight: 3.5em;
             }
         }
     }
+}
+
+app-side-menu {
+    height: 100%;
 }

frontend/src/app/components/header/header.component.ts

@@ -4,11 +4,12 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 import { AuthenticationService } from '../../core/service/authentication.service';
 import { CommonModule } from '@angular/common';
+import { SideMenuComponent } from '../side-menu/side-menu.component';
 
 @Component({
   selector: 'app-header',
   standalone: true,
-  imports: [CommonModule, MatButtonModule, MatIconModule, RouterModule],
+  imports: [CommonModule, MatButtonModule, MatIconModule, RouterModule, SideMenuComponent],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
 })