MilkyShots/MilkStream.Client/Components/Layout/NavMenu.razor

@using MilkStream.Client.Services
@using Butter.Types

@inherits LayoutComponentBase
@inject NavigationManager     navigation
@inject UserService           userService
@inject LoginService          loginService
@inject ILocalStorageService  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 (!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-lg btn-outline-light" type="button">
                        <i class="bi bi-person-circle"></i>
                    </button>
                    <button class="btn btn-lg 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" href="#"><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="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;

    protected override async Task OnInitializedAsync() {
        AuthInfo? auth = null;
        try {
            auth = await localStorage.GetItemAsync<AuthInfo>("auth");
        } catch (Exception) {
            // The stored value may be a stale DPAPI-encrypted blob from the old Blazor Server
            // app. It is not valid JSON so deserialization will throw. Clear the bad entry and
            // continue as a logged-out user; the user can log in again normally.
            await localStorage.RemoveItemAsync("auth");
        }

        if (auth != null) {
            loginService.AuthInfo = auth;
            loginService.LoggedUser = await userService.GetUserAsync();
        }
        loginService.LoggedUserChanged += (_, _) => StateHasChanged();
    }

    void OnLoginClick() {
        if (loginService.LoggedUser != null) StateHasChanged();
        else navigation.NavigateTo("/login");
    }

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

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

    async Task OnLogout() {
        _ = loginService.Logout();
        await localStorage.RemoveItemAsync("auth");
        navigation.NavigateTo("/", true);
    }

}