<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">Spacebar.Client</a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>

<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
    <nav class="nav flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        @foreach (var guild in App.ClientManager.ClientState.Guilds) {
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="@($"/channels/{guild.Key}/{guild.Value.Channels.First(x => x.Type == 0).Id}")">
                    @{
                        var guildIconUrl = string.IsNullOrWhiteSpace(guild.Value.Icon)
                            ? "/img/icon_white.png"
                            : new Uri($"{App.ClientManager.Client?.ClientWellKnown.Cdn.BaseUrl}/icons/{guild.Key}/{guild.Value.Icon}").AbsoluteUri;
                    }
                    <img class="navGuildIcon" src="@guildIconUrl" alt="" aria-hidden="true">
                    @guild.Value.Name
                </NavLink>
            </div>
        }
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="/discovery/guilds">
                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Discover...
            </NavLink>
        </div>
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu() {
        collapseNavMenu = !collapseNavMenu;
    }

    protected override async Task OnInitializedAsync() {
        App.ClientManager.ClientState.Guilds.CollectionChanged += (_,_) => this.StateHasChanged();
    }

}