[menu] write menu component with hardcoded values

frontend/src/app/components/master-page/master-page.component.html

@@ -1,5 +1,7 @@
+<app-menu></app-menu>
+
 <ng-container *ngIf="{ val: network$ | async } as network">
-<header *ngIf="headerVisible">
+<header *ngIf="headerVisible" style="position: fixed; width: 100%; z-index: 100;">
   <nav class="navbar navbar-expand-md navbar-dark bg-dark">
   <a class="navbar-brand" [ngClass]="{'dual-logos': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)">
   <ng-template [ngIf]="subdomain">

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

@@ -0,0 +1,17 @@
+<div class="sidenav" [class]="navOpen ? 'open': 'close'" *ngIf="userMenuGroups$ | async as menuGroups">
+  <div class="pt-3 pl-4 pr-4">
+    <nav>
+      <div *ngFor="let group of menuGroups">
+        <h6 class="d-flex justify-content-between align-items-center mt-4 mb-2 text-uppercase">
+          <span>{{ group.title }}</span>
+        </h6>
+        <ul class="nav flex-column" *ngFor="let item of group.items">
+          <li class="nav-item d-flex justify-content-start align-items-center" (click)="navOpen = false;">
+            <fa-icon [icon]="['fas', item.faIcon]" [fixedWidth]="true"></fa-icon>
+            <a class="nav-link" routerLinkActive="active" [routerLink]="[item.link]" role="tab">{{ item.title }}</a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </div>
+</div>

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

@@ -0,0 +1,46 @@
+.sidenav {
+  height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 1;
+  top: 65px;
+  left: 0;
+  background-color: #1d1f31;
+  overflow-x: hidden;
+  box-shadow: 0px 0px 15px 0px #000;
+  overflow-y: scroll;
+  height: 100vh;
+  @media (max-width: 991px) {
+    top: 80px;
+  };
+  @media (max-width: 572px) {
+    top: 120px;
+  }
+}
+
+.sidenav.open {
+  width: 235px;
+  @media (max-width: 400px) {
+    width: 100%;
+  }
+}
+.sidenav.close {
+  width: 0px;
+}
+
+.sidenav a {
+  text-decoration: none;
+  font-size: 20x;
+  color: lightgray;
+  margin-left: 20px;
+  display: block;
+}
+.sidenav a:hover {
+  color: white;
+}
+
+/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 15px;}
+  .sidenav a {font-size: 18px;}
+}

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

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ApiService } from '../../services/api.service';
+import { MenuGroup } from '../../interfaces/services.interface';
+
+@Component({
+  selector: 'app-menu',
+  templateUrl: './menu.component.html',
+  styleUrls: ['./menu.component.scss']
+})
+
+export class MenuComponent implements OnInit {
+  navOpen: boolean = true;
+  userMenuGroups$: Observable<MenuGroup[]> | undefined;
+
+  constructor(
+    private apiService: ApiService
+  ) {}
+
+  ngOnInit(): void {
+    this.userMenuGroups$ = this.apiService.getUserMenuGroups$();
+  }
+}