<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <style> :root { --fallback-title-bar-height: 40px; } .draggable { app-region: drag; /* Pre-fix app-region during standardization process */ -webkit-app-region: drag; } .nonDraggable { app-region: no-drag; /* Pre-fix app-region during standardization process */ -webkit-app-region: no-drag; } #titleBarContainer { position: absolute; top: env(titlebar-area-y, 0); height: env(titlebar-area-height, var(--fallback-title-bar-height)); width: 100%; } #titleBar { position: absolute; top: 0; display: flex; user-select: none; height: 100%; left: env(titlebar-area-x, 0); width: env(titlebar-area-width, 100%); } #mainContent { position: absolute; left: 0; right: 0; bottom: 0; top: env(titlebar-area-height, var(--fallback-title-bar-height)); overflow-y: scroll; } </style> </head> <body> <script> const {ipcRenderer} = require('electron'); navigator.windowControlsOverlay.ongeometrychange = function() { const {x, y, width, height} = navigator.windowControlsOverlay.getTitlebarAreaRect(); ipcRenderer.send('geometrychange', {x, y, width, height}); }; </script> <div id="titleBarContainer"> <div id="titleBar" class=" draggable"> <span class="draggable">Title goes here</span> <input class="nonDraggable" type="text" placeholder="Search"></input> </div> </div> <div id="mainContent"><!-- The rest of the webpage --></div> <script> function getCssOverlayProperties() { const cssOverlayProps = {}; const titleBarContainer = document.getElementById('titleBarContainer'); const titleBar = document.getElementById('titleBar'); cssOverlayProps.y = titleBarContainer.computedStyleMap().get('top').value; cssOverlayProps.height = titleBarContainer.computedStyleMap().get('height').value; cssOverlayProps.x = titleBar.computedStyleMap().get('left').value; cssOverlayProps.width = titleBar.computedStyleMap().get('width').value; return cssOverlayProps; } function getJSOverlayProperties() { const {x, y, width, height} = navigator.windowControlsOverlay.getTitlebarAreaRect(); return {x, y, width, height}; } </script> </body> </html>