CODEWITHSUNDEEP
electron
dynamic_anuja
dynamic_anuja

Reputation: 84

electron : In simple hello world app, not able to view the default menu bar

I am new to electron and trying to run the simple hello world. In that "Electron" app, its menu bar should show up as a normal application with generic options, such as edit, view, window, help. But I am not able to see it. My OS system is macOS High Sierra.

I simple hello world code I have taken from the following link. https://www.tutorialspoint.com/electron/electron_hello_world.htm

https://www.youtube.com/watch?v=RL305ldfzm8&list=PLC3y8-rFHvwiCJD3WrAFUrIMkGVDE0uqW&index=2

Could any one help?

Upvotes: 0

Views: 261

Answers (2)

Ali Raza
Ali Raza

Reputation: 165

Adding this work for me const { isMac } = electron;

Upvotes: 1

Sharvin K
Sharvin K

Reputation: 715

The menu shown in the tutorial is for windows system. The default menu is shown if no menu is set using Menu.setApplicationMenu(menu). Sets menu as the application menu on macOS. On Windows and Linux, the menu will be set as each window's top menu.. If you want to show that default menu use the following. Use the https://electronjs.org/docs/api/menu#menusetapplicationmenumenu link for reference

const { app, Menu } = require('electron')

const template = [
  // { role: 'appMenu' }
  ...(process.platform === 'darwin' ? [{
    label: app.getName(),
    submenu: [
      { role: 'about' },
      { type: 'separator' },
      { role: 'services' },
      { type: 'separator' },
      { role: 'hide' },
      { role: 'hideothers' },
      { role: 'unhide' },
      { type: 'separator' },
      { role: 'quit' }
    ]
  }] : []),
  // { role: 'fileMenu' }
  {
    label: 'File',
    submenu: [
      isMac ? { role: 'close' } : { role: 'quit' }
    ]
  },
  // { role: 'editMenu' }
  {
    label: 'Edit',
    submenu: [
      { role: 'undo' },
      { role: 'redo' },
      { type: 'separator' },
      { role: 'cut' },
      { role: 'copy' },
      { role: 'paste' },
      ...(isMac ? [
        { role: 'pasteAndMatchStyle' },
        { role: 'delete' },
        { role: 'selectAll' },
        { type: 'separator' },
        {
          label: 'Speech',
          submenu: [
            { role: 'startspeaking' },
            { role: 'stopspeaking' }
          ]
        }
      ] : [
        { role: 'delete' },
        { type: 'separator' },
        { role: 'selectAll' }
      ])
    ]
  },
  // { role: 'viewMenu' }
  {
    label: 'View',
    submenu: [
      { role: 'reload' },
      { role: 'forcereload' },
      { role: 'toggledevtools' },
      { type: 'separator' },
      { role: 'resetzoom' },
      { role: 'zoomin' },
      { role: 'zoomout' },
      { type: 'separator' },
      { role: 'togglefullscreen' }
    ]
  },
  // { role: 'windowMenu' }
  {
    label: 'Window',
    submenu: [
      { role: 'minimize' },
      { role: 'zoom' },
      ...(isMac ? [
        { type: 'separator' },
        { role: 'front' },
        { type: 'separator' },
        { role: 'window' }
      ] : [
        { role: 'close' }
      ])
    ]
  },
  {
    role: 'help',
    submenu: [
      {
        label: 'Learn More',
        click () { require('electron').shell.openExternalSync('https://electronjs.org') }
      }
    ]
  }
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

Upvotes: 0

Related Questions