Floating

ToolsPanel can work as a floating panel that user can drag around the screen. If used in this scenario, only Location parameter shall be bond to a variable as it can be saved or maybe adjusted by some other actions.

Panel is floating as long DockId is null.

<ToolsPanel Title="Tools" @bind-Location="_panelLocation">
    Content
</ToolsPanel>

@code {
    (string? Left, string? Top)? _panelLocation = ("100px", "120px");   
}

Dock

ToolsPanel can dock to any Dock component on the page. User can this by moving already floating panel, or the panel can be dock from the start if DockId parameter match to one of docks.

<Dock DockId="header-dock" />

<ToolsPanel @bind-DockId="_dockId">
    Content
</ToolsPanel>

@code {
    string? _dockId = "header-dock";
}

Cascaded DockId

There is even shorter way to dock ToolsPanel to the starting dock. By using power of cascading parameters, ToolsPanel can get DockId parameter set upon initialisation from parent Dock:

<Dock DockId="top-dock">
    <ToolsPanel @bind-DockId="_dockId">
        Content
    </ToolsPanel>
</Dock>

@code {
    string? _dockId;
}

In this case _dockId variable will receive top-dock as value.

Changing this variable by code will also change dock:

<Dock DockId="top-dock">
    <ToolsPanel @bind-DockId="_dockId">
        Content
    </ToolsPanel>
</Dock>

<Dock DockId="other-dock" />

<button @onclick="ChangeDock">Change dock</button>

@code {
    string? _dockId;

    void ChangeDock()
    {
        _dockId = "other-dock";
    }
}