@using RazorConsole.Components
@using RazorConsole.Core.Focus
@inject FocusManager FocusManager

<Rows>
@* First level of menu *@
<Select TItem="string"
        Options="@_mainCategories"
        Value="@_selectedCategory"
        ValueChanged="@OnMainCategoryChanged">
</Select>

@* Second level of menu that appears after selection *@
@if (_selectedCategory != null) 
{
    <Select TItem="string"
            @Key="test"
            Options="@_subCategories"
            ValueChanged="OnSubCategoryChanged">
    </Select>
}
</Rows>

@code {
    private static string test = "test";
    private string[] _mainCategories = { "Settings", "Game", "Exit" };
    private string[] _subCategories = { "Sound", "Video", "Keyboard" };
    private string? _selectedCategory;

    private async Task OnMainCategoryChanged(string value)
    {
        _selectedCategory = value;

        StateHasChanged();
        await Task.Delay(1000);

        // Move focus to next element
        await FocusManager.FocusAsync(test);
    }

    private void OnSubCategoryChanged(string value)
    {
        // etc
    }
}