I've been looking in Electron docs about toolbar customization in MacOS. The default toolbar has only the window buttons and the page title, as image below.
This is default toolbar, I'd like to insert some buttons and customize it as it was an NSToolbar in Swift.
Any Idea would be great
CodePudding user response：
You can hide the default one by passing the prop titleBarStyle: hidden
const win = new BrowserWindow({ titleBarStyle: 'hidden' })
This'll keep the standard window controls (traffic lights) on top of your web-page content.
Then you can "customize" your own toolbar by positioning html-elements where the toolbar should have been.
Make sure to add:
#menu-bar {
....
...
-webkit-app-region: drag;
}
to your menubar element.
https://www.electronjs.org/docs/api/frameless-window#hidden https://www.electronjs.org/docs/api/frameless-window#windows-control-overlay
or you can look into the custom-electron-titlebar library