@inject IJSRuntime JsRuntime

<a href="#" class="@ToggleBtnClass" data-kt-menu-trigger="@Trigger" data-kt-menu-attach="parent" data-kt-menu-placement="@MenuPlacement">
    <i class="theme-light-show bx bx-sun"></i>
    <i class="theme-dark-show bx bx-moon" ></i>
</a>

<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-muted menu-active-bg menu-state-primary fw-semibold py-4 fs-base w-175px" data-kt-menu="true" data-kt-element="theme-mode-menu">
    <div class="menu-item px-3 my-0">
        <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="light" @onclick="TriggerFlashbang">
            <span class="menu-icon" data-kt-element="icon">
                <i class="bx bx-sun"></i>
            </span>
            <span class="menu-title">Lightmode</span>
        </a>
    </div>
    <div class="menu-item px-3 my-0">
        <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="dark">
            <span class="menu-icon" data-kt-element="icon">
                <i class="bx bx-moon"></i>
            </span>
            <span class="menu-title">Darkmode</span>
        </a>
    </div>
    <div class="menu-item px-3 my-0">
        <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="system">
            <span class="menu-icon" data-kt-element="icon">
                <i class="bx bx-cog"></i>
            </span>
            <span class="menu-title">System</span>
        </a>
    </div>
</div>

@code {
    [Parameter]
    public string ToggleBtnClass { get; set; } = "";

    [Parameter]
    public string MenuPlacement { get; set; } = "bottom-end";
    
    [Parameter]
    public string ToggleBtnIconClass { get; set; } = "svg-icon svg-icon-2";
    
    [Parameter]
    public string Trigger { get; set; } = "{default:'click'}";
    
    private async void TriggerFlashbang()
    {
        await JsRuntime.InvokeVoidAsync("moonlight.flashbang.run");
    }
}