@using Moonlight.Client.UI.Layouts

@inject NavigationManager Navigation

<header class="flex items-center px-4 lg:hidden border-b border-white/5">
    <div class="py-2.5">
        <span class="relative">
            <button @onclick="Layout.ToggleMobileNavigation" aria-label="Open navigation"
                    class="relative flex min-w-0 items-center gap-3 rounded-lg p-2 text-left text-base/6 sm:text-sm/5 text-white"
                    type="button">
                <i class="icon-menu text-xl"></i>
            </button>
        </span>
    </div>
    <div class="min-w-0 flex-1">
        <nav class="flex flex-1 items-center gap-4 py-2.5">
            <div aria-hidden="true" class="-ml-4 flex-1">
            </div>
            <div class="flex items-center gap-3">
                <span class="relative">
                    <div class="relative flex min-w-0 cursor-default items-center gap-3 rounded-lg p-2 text-left text-base/6 font-medium sm:text-sm/5 text-white">
                        <div data-slot="avatar"
                             class="inline-grid shrink-0 align-middle">
                            <img
                                class="h-8 rounded-full"
                                src="/img/pfp_placeholder.png"
                                alt=""/>
                        </div>
                    </div>
                </span>
            </div>
        </nav>
    </div>
</header>

@code
{
    [Parameter] public MainLayout Layout { get; set; }

    protected override Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender)
            return Task.CompletedTask;

        Layout.OnStateChanged += () => InvokeAsync(StateHasChanged);

        return Task.CompletedTask;
    }
}