[[oktatas:szoftverfejlesztes:asztali:electron:angular-electron|< Angular-Electron]]

====== Angular-Electron - Menü ======

  * **Szerző:** Sallai András
  * Copyright (c) 2024, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== Bevezetés =====

Szabályozhatjuk az alkalmazásunknak legyen menüsávja, vagy ne legyen.

Készíthetünk saját menüsávot is.

Ebben a leírásban nem szerepel az index.html és a hozzátartozó fájlok létrehozása. Csak 
a belépési ponttal foglalkozunk.

===== A beépített menü =====

Az autoHideMenuBar: true beállítással elrejthetjük az alapértelmezett menüt.

<code javascript electron.js>
const { app, BrowserWindow } = require('electron')
 
const createWindow = () => {
    const win = new BrowserWindow({
        width: 350,
        height: 260,
        autoHideMenuBar: true
    })
    win.loadFile('index.html')
}
 
app.whenReady().then(() => {
  createWindow()
})
</code>

===== Saját menü készítése =====

<code javascript electron.js>
const { app, BrowserWindow, Menu } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 800, 
    height: 600,
    icon: 'public/icon.png',
  });
  win.loadFile('dist/electron-app/browser/index.html');  
}

app.whenReady().then(() => {
  createWindow()
})

const appMenu = [
  {
    label: 'Fájl',
    submenu: [
      { 
        label: 'Kilép',
        role: 'quit',
        accelerator: 'CmdOrCtrl+K'
      }
    ]
  },
  {
    label: 'Súgó',
    submenu: [
      { 
        label: 'Névjegy',
        role: 'about',
        accelerator: 'CmdOrCtrl+N'
      }
    ]

  }  
]

app.setAboutPanelOptions({
  applicationName: 'Angular Electron App',
  applicationVersion: '1.0.0',
  copyright: 'Copyright (c) 2022, Nagy János',
  authors: ['Nagy János'],
  website: 'https://szit.hu',
  iconPath: 'public/icon.png'
})

app.on('ready', () => {
  const menu = Menu.buildFromTemplate(appMenu)
  Menu.setApplicationMenu(menu)
})

</code>

===== Névjegy másként =====

Telepítés:
  npm install about-window

<code javascript src/electron.js>
const { default: openAboutWindow } = require('about-window');
const { app, BrowserWindow, Menu } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 800, 
    height: 600,
    icon: 'public/icon.png',
  });
  win.loadFile('dist/electron-app/browser/index.html');  
}

app.whenReady().then(() => {
  createWindow()
})

const appMenu = [
  {
    label: 'Fájl',
    submenu: [
      { 
        label: 'Kilép',
        role: 'quit',
        accelerator: 'CmdOrCtrl+K'
      }
    ]
  },
  {
    label: 'Súgó',
    submenu: [
      { 
        label: 'Névjegy',
        click: () => {
          openAboutWindow({
            icon_path: `${process.cwd()}/public/icon.png`, 
            product_name: 'Valami',
            copyright: 'Copyright (c) 2024, Nagy János',
            homepage: 'https://szit.hu',
            description: 'Minta alkalmazás'
          })
        },
        accelerator: 'CmdOrCtrl+N'
      }
    ]

  }  
]

app.on('ready', () => {
  const menu = Menu.buildFromTemplate(appMenu)
  Menu.setApplicationMenu(menu)
})

</code>






===== Linkek =====

  * https://www.electronjs.org/docs/latest/api/app#appsetaboutpaneloptionsoptions (2024)
  * https://www.npmjs.com/package/electron-about-window (2024)