I’m trying to use the titleBarOverlay option in electron.js but when I try to drag the window, it won’t drag. When I remove the option, the dragging feature works like normal. Is there a workaround for this?
index.js:
const { app, BrowserWindow } = require('electron');
let mainWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow({
height: 600,
width: 800,
title: "Last Horizon",
titleBarStyle: 'hidden',
titleBarOverlay: {
color: '#2e2e2e',
symbolColor: '#ff6d4b'
},
webPreferences: {
nodeIntegration: true
}
});
mainWindow.removeMenu()
mainWindow.loadFile('src/index.html');
});
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div class="titleBar"></div>
<div class="main">
<h1>Hello World!</h1>
</div>
</body>
</html>
styles.css
html, body {
-webkit-app-region: drag;
background-color: #2e2e2e;
color: white;
}
.titleBar {
/* -webkit-app-region: drag; */
background-color: #ffffff;
width: 100%;
height: 32px;
}