CODEWITHSUNDEEP
javascripthtmlcsselectron
Lexi Wright
Lexi Wright

Reputation: 31

How do I remove the menu bar from a specific window in electron?

I have a menu in my application that when you click on document properties another window pops up, but the application menu is also being inherited by this window, so you can open the document properties window from the document properties window. I just want to disable the menu for the document properties window,the only way I've been able to achieve this was by making the window frameless, but I still want the title bar to show, so that's not the solution I'm looking for.

I've tried using docProps.removeMenu(), docProps.setMenu(null), and even docProps.setApplicationMenu(null). I've moved it around, tried making docProps a global variable, nothing has worked.

This is my code:

//Create references for modules that require electron
const { app, BrowserWindow, Menu } = require('electron')

//Create a global reference for the main window
let mainWindow

function createWindow () {
  //Create the browser window
  mainWindow = new BrowserWindow({
    minWidth: 300,
    minHeight: 300,
    backgroundColor: '#888888'
  })

  //Load the index.html file
  mainWindow.loadFile('index.html')

  //Reload the main window on resize
  mainWindow.on('resize', function () {
    mainWindow.reload()
  })
}

function createAppMenu () {
  //Create application menu template
  const template = [
    {
      label: 'File',
      submenu: [
        {
          label: 'Document Properties...',
          click: function () {
            docProps = new BrowserWindow({
              width: 250,
              height: 300,
              resizable: false,
              title: 'Document Properties'
            })
            //This isn't working and I'm not sure why
            docProps.removeMenu()
          }
        }
      ]
    },
    {
      label: 'Edit'
    },
    {
      label: 'View'
    },
    {
      label: 'Window'
    },
    {
      label: 'Help'
    }
  ]

  //Build app menu from template
  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
}

//Call the createWindow function once electron has finished initializing
app.on('ready', function () {
  createWindow()
  mainWindow.maximize()
  createAppMenu()
})

You can see the entire project at https://github.com/Leglaine/ElectroText

The only error message I get is when I try to call docProps.setApplicationMenu(null), it says that setApplicationMenu cannot be called on docProps, but I didn't really expect that to work anyway. Thanks in advance for your help!

Upvotes: 3

Views: 1277

Answers (2)

ChrisW
ChrisW

Reputation: 56113

@aabuhijleh's answer works for me.

An alternative is presumably to call setMenu on the application's BrowserWindow instance in the first place -- to associate the menu with (only) the specific application window -- instead of calling menu.SetApplicationMenu.

Upvotes: 0

aabuhijleh
aabuhijleh

Reputation: 2464

win.removeMenu() and win.setMenu(null) seem to be currently broken in Electron when you have already set an application menu via Menu.setApplicationMenu()

Try setting an empty menu like this

docProps.setMenu(Menu.buildFromTemplate([]))

Upvotes: 2

Related Questions