@inject IJSRuntime Js

@if (_display)
{
    <div class="menu" style="--top: @(_top)px; --left: @(_left)px">
        @ChildContent
    </div>
}

@code {
    [Parameter] [EditorRequired] public required RenderFragment              ChildContent { get; set; }
    private                                      bool                        _display;
    private                                      float                       _top;
    private                                      float                       _left;
    private                                      IJSInProcessObjectReference _module = null!;

    protected override async Task OnInitializedAsync()
    {
        _module = (IJSInProcessObjectReference)await Js.InvokeAsync<IJSObjectReference>("import",
                                                                                        "./Components/Menu.razor.js");
    }
    
    public void Toggle(ElementReference root)
    {
        if (!_display)
        {
            var pos = _module.Invoke<List<float>>("getPosition", root);
            _left = pos[0];
            _top  = pos[1];
        }
        _display = !_display;
        StateHasChanged();
    }

    public void Close()
    {
        _display = false;
        StateHasChanged();
    }
}