@rendermode InteractiveServer
@implements IDisposable

<Menu Mode="MenuMode.Inline"
      Theme="MenuTheme.Dark"
      InlineCollapsed="@InlineCollapsed"
      SelectedKeys="@selectedKeys"
      OnMenuItemClicked="HandleMenuClick"
      Class="app-menu">
    <MenuItem Key="/">
        <Icon Type="IconType.OutlineHome" />
        <span>Home</span>
    </MenuItem>
    <MenuItem Key="pixiv">
        <Icon Type="IconType.OutlinePicture" />
        <span>Pixiv</span>
    </MenuItem>
    <MenuItem Key="weather">
        <Icon Type="IconType.OutlineCloud" />
        <span>Weather</span>
    </MenuItem>
</Menu>

@code {
    [Parameter]
    public bool InlineCollapsed { get; set; }

    private string[] selectedKeys = ["/"];

    [Inject]
    private NavigationManager NavigationManager { get; set; } = default!;

    protected override void OnParametersSet()
    {
        UpdateSelectedKeys(NavigationManager.Uri);
    }

    protected override void OnInitialized()
    {
        UpdateSelectedKeys(NavigationManager.Uri);
        NavigationManager.LocationChanged += HandleLocationChanged;
    }

    private void HandleLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        UpdateSelectedKeys(e.Location);
        StateHasChanged();
    }

    private void UpdateSelectedKeys(string uri)
    {
        var relative = NavigationManager.ToBaseRelativePath(uri);
        if (string.IsNullOrEmpty(relative))
        {
            selectedKeys = ["/"];
        }
        else
        {
            var key = relative.Split('/', StringSplitOptions.RemoveEmptyEntries).FirstOrDefault() ?? string.Empty;
            selectedKeys = [key];
        }
    }

    private void HandleMenuClick(MenuItem menuItem)
    {
        if (menuItem.Key is null)
        {
            return;
        }

        selectedKeys = [menuItem.Key];
        var target = menuItem.Key == "/" ? "/" : $"/{menuItem.Key}";
        NavigationManager.NavigateTo(target);
    }

    public void Dispose()
    {
        NavigationManager.LocationChanged -= HandleLocationChanged;
    }
}