refactor(pwa): add dropdown menu in header component

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

@@ -8,7 +8,64 @@
     </div>
 </div>
 <div fxLayout="column" fxFlex="50px" fxLayoutAlign="center center">
-    <button mat-icon-button (click)="openSettings()">
+    <button
+        *ngIf="isElectron; else pwaMenu"
+        mat-icon-button
+        (click)="openSettings()"
+    >
         <mat-icon>settings</mat-icon>
     </button>
 </div>
+
+<ng-template #pwaMenu>
+    <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Open menu">
+        <mat-icon>menu</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+        <button mat-menu-item (click)="openSettings()">
+            <mat-icon>settings</mat-icon>
+            <span>Settings</span>
+        </button>
+        <mat-divider></mat-divider>
+        <button
+            mat-menu-item
+            aria-label="Support IPTVnator on GitHub"
+            (click)="openUrl('https:///github.com/4gray/iptvnator')"
+        >
+            <mat-icon>recommend</mat-icon>
+            <span>GitHub</span>
+        </button>
+        <button
+            mat-menu-item
+            aria-label="Report a bug"
+            (click)="openUrl('https://github.com/4gray/iptvnator/issues')"
+        >
+            <mat-icon>bug_report</mat-icon>
+            <span>Report a bug</span>
+        </button>
+        <mat-divider></mat-divider>
+        <button
+            mat-menu-item
+            aria-label="What is new?"
+            (click)="setDialogVisibility(true)"
+        >
+            <mat-icon>new_releases</mat-icon>
+            <span>What is new</span>
+        </button>
+        <button
+            mat-menu-item
+            aria-label="About this application"
+            (click)="openAboutDialog()"
+        >
+            <mat-icon>info</mat-icon>
+            <span>About</span>
+        </button>
+    </mat-menu>
+</ng-template>
+<ngx-whats-new
+    *ngIf="isDialogVisible$ | async"
+    (closeModal)="setDialogVisibility(false)"
+    [items]="modals"
+    [options]="options"
+>
+</ngx-whats-new>

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

@@ -1,5 +1,9 @@
 import { Component, Input } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
+import { DataService } from '../../../services/data.service';
+import { WhatsNewService } from '../../../services/whats-new.service';
+import { AboutDialogComponent } from '../about-dialog/about-dialog.component';
 
 @Component({
     selector: 'app-header',
@@ -9,13 +13,33 @@ import { Router } from '@angular/router';
 export class HeaderComponent {
     /** Title of the header */
     @Input() title: string;
+
     /** Subtitle of the header */
     @Input() subtitle: string;
 
+    /** Environment flag */
+    isElectron = this.dataService.isElectron;
+
+    /** Visibility flag of the "what is new" modal dialog */
+    isDialogVisible$ = this.whatsNewService.dialogState$;
+
+    /** Dialog options */
+    options = this.whatsNewService.options;
+
+    /** Modals to show for the updated version of the application */
+    modals = this.whatsNewService.getLatestChanges();
+
     /** Creates an instance of SettingsComponent and injects angulars router module
      * @param router angulars router
+     * @param dataService
+     * @param whatsNewService
      */
-    constructor(private router: Router) {}
+    constructor(
+        private router: Router,
+        private dataService: DataService,
+        private whatsNewService: WhatsNewService,
+        private dialog: MatDialog
+    ) {}
 
     /**
      * Navigates to the settings page
@@ -23,4 +47,33 @@ export class HeaderComponent {
     openSettings(): void {
         this.router.navigate(['/settings']);
     }
+
+    /**
+     * Opens the provided URL string in new browser window
+     * @param url url to open
+     */
+    openUrl(url: string): void {
+        window.open(url, '_blank');
+    }
+
+    /**
+     * Sets the visibility flag of the modal window
+     * @param visible show/hide window flag
+     */
+    setDialogVisibility(visible: boolean): void {
+        if (this.modals.length > 0) {
+            this.whatsNewService.changeDialogVisibleState(visible);
+        }
+    }
+
+    /**
+     * Opens the about dialog with description and version of
+     * the app
+     */
+    openAboutDialog(): void {
+        this.dialog.open(AboutDialogComponent, {
+            panelClass: 'about-dialog-overlay',
+            width: '600px',
+        });
+    }
 }