Hide titlebar on window hover in electron?

Question

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

Answer 1

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

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.

Answer 2

In case you want to hide the title bar and the menu bar and keep the window rounded corner.

new BrowserWindow({
        titleBarStyle : "hidden",
        ...
    });