Search code examples
javascriptelectrontitlebar

Hide titlebar on window hover in electron?

Okay so I want the titlebar to not be inside the main window but rather a bar on top of it which goes transparent when not hovering over the main window or said titlebar.

I have an example from another electron app here.

So does anyone have any Idea how I could create something like this? I thought about creating a second window but I think that isn't going to work. But someone else has made it so it must be possible

Solution

  • You need a transperent frameless Window, with grid or flex layouted titlebar and container area.

    const {BrowserWindow} = require('electron')
let win = new BrowserWindow({transparent: true, frame: false})
win.show()

    Check out the Electron Docs with crossplatform hints about transperent windows.

    The you can then add or remove a class on the title bar to make it appear/disappear. The titlebar element should have the css property -webkit-app-region: drag

    enter image description here

    You should consider to fill out the non-visible area of that window with the content, also the perferct usecase for a little animation. Otherwise it may block off a application behind it, and the user has no idea why. Otherwise you need to manage the click forwording manually via: 

    win.setIgnoreMouseEvents(true)

    Check out the Electron Docs on the matter since the forwarding can get pretty complex.