MilkyShots/MilkStream/Components/Layout/NavMenu.razor

@using MilkStream.Services
@using Butter.Types

@inherits LayoutComponentBase
@inject NavigationManager     Navigation
@inject UserService           UserService
@inject LoginService          LoginService
@inject ProtectedLocalStorage LocalStorage

<div class="navbar navbar-expand-sm bg-dark-subtle">
    <div class="container-xl">
        <a class="mx-2 navbar-brand" href="">
            <img src="img/MilkyShotLogoWhite.svg" alt="Milky Shot Logo" class="logo mx-2" href=""/>
            <span class="text m-1">Milky Shot</span>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Cosplayers</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Albums</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Photos</a>
                </li>
            </ul>
            @if (isConnected) {
                if (!LoggedIn) {
                    <button class="btn btn-primary mx-1" @onclick="OnLoginClick">
                        Login
                    </button>
                    <button class="btn btn-primary mx-1" @onclick="OnRegisterClick">
                        Register
                    </button>
                } else {
                    <div class="d-flex">
                        <input class="form-control form-control-sm ms-1"
                               style="border-top-right-radius: 0; border-bottom-right-radius: 0" type="search"
                               placeholder="Search anything..." aria-label="search"/>
                        <button class="btn btn-sm btn-outline-success me-1"
                                style="border-top-left-radius: 0; border-bottom-left-radius: 0" type="submit">
                            <i class="bi bi-search-heart"></i>
                        </button>
                    </div>
                    <div class="mx-2">@LoginService.LoggedUser?.Username</div>
                    <div class="btn-group">
                        <button class="btn btn-outline-light" type="button">
                            <i class="bi bi-person-circle"></i>
                        </button>
                        <button class="btn btn-outline-light dropdown-toggle dropdown-toggle-split"
                                data-bs-toggle="dropdown"></button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" @onclick="OnProfileClick"><i class="bi bi-person-lines-fill"></i> Profile</a></li>
                            @if (Admin) {
                                <li><a class="dropdown-item" @onclick="OnSettingsClick"><i
                                            class="bi bi-gear-wide-connected"></i> Settings</a></li>
                                <li><a class="dropdown-item" @onclick="OnSettings1Click"><i
                                            class="bi bi-gear-wide-connected"></i> Settings 1</a></li>
                                <li><a class="dropdown-item" @onclick="OnJobsClick"><i class="bi bi-kanban-fill"></i>
                                        Jobs</a></li>
                            }
                            <li><a class="dropdown-item" @onclick="OnLogout"><i class="bi bi-door-closed"></i>
                                    Logout</a></li>
                        </ul>
                    </div>
                }
            }
        </div>
    </div>
</div>

@code{
    bool LoggedIn => LoginService.IsLoggedIn;
    bool Admin    => LoginService.LoggedUser?.AccessLevel == EAccessLevel.Admin;
    bool isConnected;
    bool needsUpdate;

    protected async override Task OnInitializedAsync() {
        LoginService.LoggedUserChanged += (_, _) => needsUpdate = true;
        await base.OnInitializedAsync();
        //await LoadStateAsync();
    }

    protected async override Task OnAfterRenderAsync(bool firstRender) {
        if (firstRender || needsUpdate) {
            isConnected = true;
            await LoadStateAsync();
            needsUpdate = false;
            StateHasChanged();
        }
    }

    private async Task LoadStateAsync() {
        var auth = await LocalStorage.GetAsync<AuthInfo>("auth");
        if (auth.Success == false) return;

        LoginService.AuthInfo   = auth.Value;
        LoginService.LoggedUser = await UserService.GetUserAsync(); //.ConfigureAwait(false);
    }

    async Task OnLoginClick() {
        LoginService.LoggedUser = await UserService.GetUserAsync();

        if (LoginService.LoggedUser != null) needsUpdate = true;
        else Navigation.NavigateTo("/login");
    }

    void OnRegisterClick() => Navigation.NavigateTo("/register");

    void OnSettingsClick() => Navigation.NavigateTo("/settings");

    void OnJobsClick() => Navigation.NavigateTo("/jobs");

    async Task OnLogout() {
        _ = LoginService.Logout();
        await LocalStorage.DeleteAsync("auth");
        Navigation.NavigateTo("/", true);
    }

    void OnSettings1Click() => Navigation.NavigateTo("/Settings1");

    void OnProfileClick() => Navigation.NavigateTo($"/User/{LoginService.AuthInfo?.UserId}", true);

}