CODEWITHSUNDEEP
javascriptelectron
spring
spring

Reputation: 18487

Hiding the Window Menu when app is full screen on Windows?

I have an Electron app running on OSX and Windows. When the Windows version is full screen it still shows a menu bar and I would like it not to. Basically I want what happens on OSX: when the app is "full screen" no menu bar or window 'chrome' should appear.

I've tried setAutoHideMenuBar during my window set up but that made no difference. Am I using it wrong or misunderstanding what it is supposted to do?

I've seen some QAs suggestin setMenu(null) but won't that blow out the menu entirely? I do want the menu when in window mode or (on Windows) when the Alt key is pressed.

   mainWindow = new BrowserWindow({
        show: false,
        width: 1024,
        height: 768,
        minWidth: 400,
        minHeight: 200,
        resizable: true,
        backgroundColor: '#222',
        center: true,
        setAutoHideMenuBar: true
    });

From the docs:

win.setAutoHideMenuBar(hide)

hide Boolean

Sets whether the window menu bar should hide itself automatically. Once set the menu bar will only show when users press the single Alt key.

If the menu bar is already visible, calling setAutoHideMenuBar(true) won’t hide it immediately.

From the docs

win.setMenuBarVisibility(visible) Windows Linux

visible Boolean

Sets whether the menu bar should be visible. If the menu bar is auto-hide, users can still bring up the menu bar by pressing the single Alt key.

From the docs

win.setMenu(menu) Linux Windows

menu Menu

Sets the menu as the window’s menu bar, setting it to null will remove the menu bar.

Upvotes: 4

Views: 7999

Answers (2)

spring
spring

Reputation: 18487

An error on my part and a "go figure"

  1. I was misusing the setAutoHideMenuBar command, trying to use it as an option when creating the window. The correct option syntax is autoHideMenuBar: true. 
app.on('ready', function () {
    mainWindow = new BrowserWindow({
        show: false,
        width: 1024,
        height: 768,
        minWidth: 400,
        minHeight: 200,
        resizable: true,
        backgroundColor: '#222',
        center: true,
        autoHideMenuBar: true
    });

  1. To handle toggling fullscreen, in setting up my menu I used the shortcut

    role: 'togglefullscreen'

While this works and includes the keyboard accelerators, the menu bar always appears and the autoHideMenuBarsetting is apparently ignored. I don't understand why. So instead of the shortcut, I use this and the menu bar hides correctly. 

            {
                label: 'Toggle Full Screen',
                click: () => { toggleFullscreen();},
                accelerator: 'CmdOrCtrl+f'
            }

function toggleFullscreen() {
    if (mainWindow.isFullScreen()) {
        mainWindow.setFullScreen(false);
    } else {
        mainWindow.setFullScreen(true);
    }
}

Upvotes: 5

KBIIX
KBIIX

Reputation: 911

Use setFullScreen method.

function (item, focusedWindow) {
    if (focusedWindow) {
        focusedWindow.setFullScreen(!focusedWindow.isFullScreen())
    }
}

Upvotes: 1

Related Questions