Put the titlebar elsewhere

What if you don't want your window's titlebar to be at the very top of the window? Take the File Manager for example, its titlebar is to the right of the sidebar, which immediately indicates it's not being rendered outside the window body like normal titlebars. In first-party apps I do this using the <CustomTitlebar/> svelte component, which is a recreation of the regular titlebar in Svelte that can be put anywhere. But you're in luck! I've added a similar system for third-party apps to allow you to put the titlebar wherever you want.

To hide the regular titlebar (the one that's always above the body), be sure to set state.headless to true in your application's _app.tpa file. Read more about the TPA configuration here.

The CustomTitlebar class

Using the CustomTitlebar class, you can put a titlebar wherever you want. It doesn't even have to be just one! The sky is the limit, even if I'd discourage you from having more than one titlebar as to not confuse your users.

To create a titlebar, simply construct the class, passing in your app's main process:

const titlebar = new CustomTitlebar(this);

You can then call the render method of this titlebar constant to append the titlebar to any given HTML element. Keep in mind that you can only use a custom titlebar instance once: you'll have to call dispose on it if you wish to relocate it. Let's render the titlebar on a div named content:

const content = body.querySelector("div#content");
const titlebar = new CustomTitlebar(this);
titlebar.render(content);

If you need a custom class name on that titlebar, you can also pass that in as a second argument in the class constructor, like so:

const titlebar = new CustomTitlebar(this, "banana-titlebar");

Getting the titlebar or its target

If you somehow need to access the titlebar's HTML element, or the target that the titlebar was appended to, I made methods for that:

const target = titlebar.getTarget(); // The target to which the titlebar was appended
const titlebarHtml = titlebar.getTitlebar(); // The titlebar's HTML element

Disposing the titlebar

If you want to get rid of the titlebar, or perhaps if you want to move it to another part of your app, call the dispose method:

titlebar.dispose(); 

This removes the titlebar from its target and clears out the titlebar and target from the class instance, so that it's ready for new adventures.