adds custom menu bar

src/index.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow } from 'electron';
+import { app, BrowserWindow, Menu } from 'electron';
 //import { enableLiveReload } from 'electron-compile';
 
 // Keep a global reference of the window object, if you don't, the window will
@@ -39,7 +39,11 @@ const createWindow = async () => {
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.on('ready', createWindow);
+app.on('ready', () => {
+  createWindow();
+  const menu = Menu.buildFromTemplate(template)
+  Menu.setApplicationMenu(menu)
+});
 
 // Quit when all windows are closed.
 app.on('window-all-closed', () => {
@@ -60,3 +64,144 @@ app.on('activate', () => {
 
 // In this file you can include the rest of your app's specific main process
 // code. You can also put them in separate files and import them here.
+
+// This is the menu generation code
+let template: any;
+template = [
+  {
+    label: 'File',
+    submenu: [
+      {
+        label: 'Import Savefile',
+        click () {
+          mainWindow.webContents.send('to-settings');
+          mainWindow.webContents.send('import-savefile');
+        }
+      },
+      {
+        label: 'Export Savefile',
+        click () {
+          mainWindow.webContents.send('to-settings');
+          mainWindow.webContents.send('export-savefile');
+        }
+      }
+    ]
+  },
+  {
+    label: 'Edit',
+    submenu: [
+      {role: 'undo'},
+      {role: 'redo'},
+      {type: 'separator'},
+      {role: 'cut'},
+      {role: 'copy'},
+      {role: 'paste'},
+      {role: 'pasteandmatchstyle'},
+      {role: 'delete'},
+      {role: 'selectall'}
+    ]
+  },
+  {
+    label: 'View',
+    submenu: [
+      {role: 'reload'},
+      {role: 'forcereload'},
+      {role: 'toggledevtools'},
+      {type: 'separator'},
+      {role: 'resetzoom'},
+      {role: 'zoomin'},
+      {role: 'zoomout'},
+      {type: 'separator'},
+      {role: 'togglefullscreen'}
+    ]
+  },
+  {
+    label: 'Go',
+    submenu: [
+      {
+        label: 'Home',
+        click () {
+          mainWindow.webContents.send('to-home');
+        }
+      },
+      {
+        label: 'Lists',
+        click () {
+          mainWindow.webContents.send('to-lists');
+        }
+      },
+      {
+        label: 'Guide',
+        click () {
+          mainWindow.webContents.send('to-guide');
+        }
+      },
+      {
+        label: 'Settings',
+        click () {
+          mainWindow.webContents.send('to-settings');
+        }
+      },
+    ]
+  },
+  {
+    role: 'window',
+    submenu: [
+      {role: 'minimize'},
+      {role: 'close'}
+    ]
+  },
+  {
+    role: 'help',
+    submenu: [
+      {
+        label: 'Learn More',
+        click () { require('electron').shell.openExternal('https://electronjs.org') }
+      },
+      {
+        label: 'GitHub Repository',
+        click () { require('electron').shell.openExternal('https://github.com/malsf21/fair-chair/') }
+      }
+    ]
+  }
+]
+
+if (process.platform === 'darwin') {
+  // "App" Menu
+
+  template.unshift({
+    label: app.getName(),
+    submenu: [
+      {role: 'about'},
+      {type: 'separator'},
+      {role: 'services', submenu: []},
+      {type: 'separator'},
+      {role: 'hide'},
+      {role: 'hideothers'},
+      {role: 'unhide'},
+      {type: 'separator'},
+      {role: 'quit'}
+    ]
+  })
+
+  // Edit menu
+  template[1].submenu.push(
+    {type: 'separator'},
+    {
+      label: 'Speech',
+      submenu: [
+        {role: 'startspeaking'},
+        {role: 'stopspeaking'}
+      ]
+    }
+  )
+
+  // Window menu
+  template[3].submenu = [
+    {role: 'close'},
+    {role: 'minimize'},
+    {role: 'zoom'},
+    {type: 'separator'},
+    {role: 'front'}
+  ]
+}

src/pages/home/home.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, NgZone } from '@angular/core';
 import { Router } from '@angular/router';
 import { ElectronService } from 'ngx-electron';
 
@@ -23,7 +23,7 @@ import { ElectronService } from 'ngx-electron';
         </p>
       </div>
       <div class="card-footer">
-        <button class="btn btn-success" (click)="toGuide()"><i class="fa fa-graduation-cap"></i> Learn more</button>
+        <button class="btn btn-success" (click)="toList()"><i class="fa fa-arrow-right"></i> Try Now</button>
       </div>
     </div>
     <div class="card border-primary">
@@ -53,15 +53,39 @@ import { ElectronService } from 'ngx-electron';
 })
 
 export class HomePageComponent {
-  constructor(private router: Router, private electronService: ElectronService){
+  constructor(private router: Router, private electronService: ElectronService, private zone: NgZone){
+    this.electronService.ipcRenderer.on('to-home', (event: any) => {
+      console.log(event);
+      this.toHome();
+    });
+    this.electronService.ipcRenderer.on('to-lists', (event: any) => {
+      console.log(event);
+      this.toList();
+    });
+    this.electronService.ipcRenderer.on('to-guide', (event: any) => {
+      console.log(event);
+      this.toGuide();
+    });
+    this.electronService.ipcRenderer.on('to-settings', (event: any) => {
+      console.log(event);
+      this.toSettings();
+    });
   }
 
-  toGuide(){
-    this.router.navigate(['/guide-page']);
+  toHome(){
+    this.zone.run(() => this.router.navigate(['/home-page']));
   }
 
   toList(){
-    this.router.navigate(['/lists-page']);
+    this.zone.run(() => this.router.navigate(['/lists-page']));
+  }
+
+  toGuide(){
+    this.zone.run(() => this.router.navigate(['/guide-page']));
+  }
+
+  toSettings(){
+    this.zone.run(() => this.router.navigate(['/settings-page']));
   }
 
   openLink(link: string){

src/pages/settings/settings.ts

@@ -99,6 +99,16 @@ export class SettingsPageComponent {
     this.electronVersion = this.electronService.process.versions.electron;
     this.chromeVersion = this.electronService.process.versions.chrome;
     this.nodeVersion = this.electronService.process.versions.node;
+
+    this.electronService.ipcRenderer.on('export-savefile', (event: any) => {
+      console.log(event);
+      this.exportList();
+    });
+
+    this.electronService.ipcRenderer.on('import-savefile', (event: any) => {
+      console.log(event);
+      this.importList();
+    });
   }
 
   importList(){