UntitledImGuiFramework allows you to add standard window decorations to your main bar. This way, you can have a more compact interface that looks native to your app, rather than to the OS.

Caution

This feature is semi-broken on Wayland. While you can render the bar and use the buttons, dragging the window using this bar is explicitly prohibited by the design of the Wayland security model. This means that there is currently no way to be able to fully disable window decorations and to drag the window without window decorations approved by the compositor.

Setting up the bar

Automatic setup

The client-side bar can be set up automatically like this:

if (const bool bRendered = UImGui::ClientSideBar::Begin())
{
    ... // Your code here
    UImGui::ClientSideBar::End(bRendered);
}

The End function also has default arguments for the destructive colour and its hover variant as FVector4. The default values are:

FVector4 destructiveColour = { 1.0, 0.482, 0.388f, 1.0f }, FVector4 destructiveColourActive = { 0.753f, 0.110f, 0.157f, 1.0f }

They are used for the close button, since it needs to show a red/alarming background colour when hovered on or pressed.

This setup automatically creates a dear imgui main menu bar for convenience. For more control over how you're drawing the bar, refer to the manual setup section.

Manual setup

In the manual setup you need to create your dear imgui main menu bar yourself, set its style and render the client-side bar inside it. Here is an example:

UImGui::ClientSideBar::BeginManualStyle();
if (ImGui::BeginMainMenuBar())
{
    UImGui::ClientSideBar::BeginManualRender();
    ... // Render your components here
    UImGui::ClientSideBar::EndManualRender();
}
UImGui::ClientSideBar::EndManualStyle();

The EndManualRender function takes the same default arguments for the destructive colour as the End function.

Flags

There is also the SetFlags function, which allows you to modify the behaviour and features of the client-side bar.

By default we enable all the features, so there is only need to call this function to disable them.

Flags are represented as a bitmask enum of type UImGui::ClientSideBarFlags`. This enum looks like this:

typedef enum UImGui_ClientSideBarFlags
{
    UIMGUI_CLIENT_SIDE_BAR_FLAG_NONE                = 0,
    UIMGUI_CLIENT_SIDE_BAR_FLAG_MINIMISE_BUTTON     = 1 << 0,
    UIMGUI_CLIENT_SIDE_BAR_FLAG_MAXIMISE_BUTTON     = 1 << 1,
    UIMGUI_CLIENT_SIDE_BAR_FLAG_CLOSE_BUTTON        = 1 << 2,
    UIMGUI_CLIENT_SIDE_BAR_FLAG_MOVEABLE            = 1 << 3,
    UIMGUI_CLIENT_SIDE_BAR_FLAG_ALL                 = UIMGUI_CLIENT_SIDE_BAR_FLAG_MINIMISE_BUTTON
                                                    | UIMGUI_CLIENT_SIDE_BAR_FLAG_MAXIMISE_BUTTON
                                                    | UIMGUI_CLIENT_SIDE_BAR_FLAG_CLOSE_BUTTON
                                                    | UIMGUI_CLIENT_SIDE_BAR_FLAG_MOVEABLE
} UImGui_ClientSideBarFlags;

To disable a flag write something like:

UImGui::ClientSideBar::SetFlags(UIMGUI_CLIENT_SIDE_BAR_FLAG_ALL & ~UIMGUI_CLIENT_SIDE_BAR_FLAG_MINIMISE_BUTTON);

This line removes the minimise button.

Caution

Even though UIMGUI_CLIENT_SIDE_BAR_FLAG_MOVEABLE can be enabled on Wayland, due to Wayland's security model it will not function.

Warning

The UIMGUI_CLIENT_SIDE_BAR_FLAG_MOVEABLE flag is ignored on macOS, since there is no way to disable window movement when dragging on the bar.

C API

The client-side bar C API is the same as the C++ API with the exception of all function names being prefixed with UImGui_ClientSideBar_ instead of the C++ namespace.

Pictures and platform differences

There are differences between platforms which you need to be aware of.

The bar looks like this on macOS:

image

Note

The bar is automatically made taller to accommodate the size of the traffic light buttons. Additionally, all rendering starts after the 70th pixel(with DPI scaling) from left to right.

The bar looks like this on Windows:

image

The bar looks like this on all other operating systems:

image

The bar is significantly smaller, though you can play around with the ImGuiStyleVar_FramePadding variable to make the components larger or smaller.