refactor(pwa): add dropdown menu in header component

src/app/material.module.ts

@@ -1,21 +1,22 @@
+import { ScrollingModule } from '@angular/cdk/scrolling';
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import { MatGridListModule } from '@angular/material/grid-list';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatCheckboxModule } from '@angular/material/checkbox';
 
 @NgModule({
     exports: [
@@ -36,6 +37,7 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
         MatGridListModule,
         MatTooltipModule,
         MatCheckboxModule,
+        MatMenuModule,
     ],
 })
 export class MaterialModule {}

src/app/services/whats-new.service.ts

@@ -1,5 +1,5 @@
-import { ModalWindow } from 'ngx-whats-new/lib/modal-window.interface';
 import { Injectable } from '@angular/core';
+import { ModalWindow } from 'ngx-whats-new/lib/modal-window.interface';
 import { BehaviorSubject } from 'rxjs';
 
 @Injectable({
@@ -196,4 +196,12 @@ export class WhatsNewService {
     getModalsByVersion(version: string): ModalWindow[] {
         return this.modals[version] || [];
     }
+
+    /**
+     * Returns modals with latest changes
+     */
+    getLatestChanges(): ModalWindow[] {
+        const lastVersion = Object.keys(this.modals).at(-1);
+        return this.modals[lastVersion];
+    }
 }

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',
+        });
+    }
 }

src/styles.scss

@@ -64,3 +64,11 @@ textarea,
 .mb-10 {
     margin-bottom: 10px;
 }
+
+.about-dialog-overlay {
+    .mat-dialog-container {
+        text-align: center;
+        background: black !important;
+        color: #fff !important;
+    }
+}