For PWA's your app needs to have the window-controls-overlay enabled and the browser needs to support the feature:
// site.webmanifest
{
// ...
"display_override": ["window-controls-overlay"],
// ...
}The titlebar title is inherited from the document's title, and the image is the first favicon entry in the website. They can be overwritten using their respective props.
For electron you need to the enable the custom controls using the controls prop, handle the maximize and minimize events yourself, and create a frameless window:
new BrowserWindow({
// ...
frame: false,
autoHideMenuBar: true,
/// ...
})This component uses $$restProps, which means you can pass any property to the root div, like style, class etc.
import titlebar from 'universal-title-bar'
import snap from 'snap-layout'
<titlebar controls={true} autohide={true} hidden={false} title='My App' image='./image.png' on:close={() => { window.close() }} on:maximize={() => { handleMax() }} on:minimize={() => { handleMin() }}>
<snap size='env(titlebar-area-height, 32px)' />
</titlebar>Or use as a web component outside Svelte:
<script src="https://cdn.jsdelivr.net/npm/universal-title-bar@latest/dist/universal-title-bar.mjs"></script>
<body>
<universal-title-bar controls="true"></universal-title-bar>
</body>