Reorganized

src/app/components/toolbar/toolbar.component.html

@@ -0,0 +1,15 @@
+<mat-toolbar>
+    <button mat-icon-button routerLink="/">
+        <img src="/assets/images/logo.png" height="35px" width="auto">
+    </button>
+    <small class="ml-1 text-muted">{{version}}</small>
+    <div class="ml-auto">
+        <div *ngFor="let section of menu" class="d-inline ml-4">
+            <ng-container *ngFor="let item of section">
+                <button *ngIf="!item.hidden" mat-icon-button [ngClass]="{'selected': item.enabled}" class="ml-1" (click)="clickWrapper(item)">
+                    <mat-icon>{{item.icon}}</mat-icon>
+                </button>
+            </ng-container>
+        </div>
+    </div>
+</mat-toolbar>

src/app/components/toolbar/toolbar.component.scss

@@ -0,0 +1,7 @@
+mat-toolbar {
+  height: 40px !important;
+}
+
+.selected {
+  background-color: #cccccc;
+}

src/app/components/toolbar/toolbar.component.ts

@@ -0,0 +1,39 @@
+import {Component, EventEmitter, Input, Output} from "@angular/core";
+import {ToolbarItem} from "./toolbarItem";
+import {version} from '../../../../package.json';
+
+@Component({
+    selector: 'toolbar',
+    templateUrl: 'toolbar.component.html',
+    styleUrls: ['toolbar.component.scss']
+})
+export class ToolbarComponent {
+    @Input() menu: ToolbarItem[][];
+
+    @Output() menuChange = new EventEmitter<ToolbarItem[][]>();
+
+    readonly version = version;
+
+    constructor() { }
+
+    clickWrapper(item: ToolbarItem) {
+        if(item.toggle) {
+            if (item.individualToggle) {
+                this.menu.forEach(menu => menu.filter(i2 => item.name != i2.name && i2.individualToggle).forEach(item => {
+                    item.enabled = false;
+                    if (item.onDisabled) item.onDisabled();
+                }));
+            }
+
+            item.enabled = !item.enabled;
+            this.menuChange.emit(this.menu);
+
+            if(item.enabled) {
+                if(item.onEnabled) item.onEnabled();
+            } else {
+                if(item.onDisabled) item.onDisabled();
+            }
+        }
+        if(item.click) item.click();
+    }
+}

src/app/components/toolbar/toolbarItem.ts

@@ -0,0 +1,11 @@
+export interface ToolbarItem {
+    name: string;
+    icon: string;
+    hidden?: boolean;
+    toggle?: boolean;
+    individualToggle?: boolean;
+    click?: () => void;
+    enabled?: boolean;
+    onEnabled?: () => void;
+    onDisabled?: () => void;
+}