Sidebar menu reflecting logon role

[dslaby]

I installed blazorbootstrap after removing bootstrap, but in the MainLayout and NavMenu does not render the same way; I have an authorized view and NotAuthorized view (implemented with authentical and authorization on sql database). How do I convert the div classes and NavLink to blazorbootstrap? This is my first attempt at using Blazor and assistance will be greatly appreciated.

MainLayout.razor
@using Microsoft.AspNetCore.Components.Authorization
@using System.Security.Claims
@inherits LayoutComponentBase
@Inject AuthenticationStateProvider auth

<main>
    <div class="top-row px-4">
        <CascadingAuthenticationState>
            <AuthorizeView>
                <Authorized>
                  <!--Logged in @email - @role <a href="/logout">Logout</a>-->
                  <table><tr>
                    <td><a href="https://www.rfsc.org" target="_blank">RFSC</a></td>
                            <td><a href="https://webmail-oxcs.networksolutionsemail.com/appsuite/?user_domain=mail.rfsc.org" target="_blank">NS Webmail</a></td>
                    <td><a href="https://secureaccess.wa.gov/myAccess/saw/select.do" target="_blank">WA Logon</a></td>
                    <td>@role Dashboard <a href="/logout">Logout</a></td>
                  </tr></table>                     
                </Authorized>
                <NotAuthorized>
                    <a href="/login">Login</a>
                </NotAuthorized>
            </AuthorizeView>
        </CascadingAuthenticationState>
    </div>

    <article class="content px-4">
        @Body
    </article>
</main>

An unhandled error has occurred. Reload 🗙

@code {
public string email { get; set; } = "Unknown";
public string role { get; set; } = "Unknown";

protected override async Task OnInitializedAsync()
{
    var state = await auth.GetAuthenticationStateAsync();
    var user = state.User;
    if (user?.Identity?.IsAuthenticated == true)
    {
        email = user.Claims.FirstOrDefault(x => x.Type == ClaimTypes.Email)?.Value ?? "Unknown";
        role = user.Claims.FirstOrDefault(x => x.Type == ClaimTypes.Role)?.Value ?? "Unknown";
    }
}

NavMenu.razor
@using Microsoft.AspNetCore.Components.Authorization

RIMS8

Home

RFSC.ORG

NS Webmail

anN

Information

Login

Register

DashboardAD

Logout

        <AuthorizeView Roles="Case Manager">
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="DashboardCM">
                    <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> DashboardCM
                </NavLink>
            </div>
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="Logout">
                    <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Logout
                </NavLink>
            </div>
        </AuthorizeView>

        <AuthorizeView Roles="Coordinator">
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="DashboardCD">
                    <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> DashboardCD
                </NavLink>
            </div>
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="Logout">
                    <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Logout
                </NavLink>
            </div>
        </AuthorizeView>

        <AuthorizeView Roles="Instructor">
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="DashboardCI">
                    <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> DashboardCI
                </NavLink>
            </div>
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="Logout">
                    <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Logout
                </NavLink>
            </div>
        </AuthorizeView>

        <AuthorizeView Roles="Program Manager">
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="DashboardPM">
                    <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> DashboardPM
                </NavLink>
            </div>
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="Logout">
                    <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Logout
                </NavLink>
            </div>
        </AuthorizeView>

        <AuthorizeView Roles="Data Audit">
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="DashboardDA">
                    <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> DashboardDA
                </NavLink>
            </div>
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="Logout">
                    <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Logout
                </NavLink>
            </div>
        </AuthorizeView>

        <AuthorizeView Roles="Finance">
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="DashboardFA">
                    <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> DashboardFA
                </NavLink>
            </div>
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="Logout">
                    <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Logout
                </NavLink>
            </div>
        </AuthorizeView>
        <AuthorizeView Roles="Tech Support">
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="DashboardTS">
                    <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> DashboardTS
                </NavLink>
            </div>
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="register">
                    <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Register
                </NavLink>
            </div>
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="Logout">
                    <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Logout
                </NavLink>
            </div>
        </AuthorizeView>
    </CascadingAuthenticationState>
</nav>

@Inject NavigationManager NavigationManager
@code {
private void Logout()
{
NavigationManager.NavigateTo("logout");
}

private string? currentUrl;

protected override void OnInitialized()
{
    currentUrl = NavigationManager.ToBaseRelativePath(NavigationManager.Uri);
    NavigationManager.LocationChanged += OnLocationChanged;
}

private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
{
    currentUrl = NavigationManager.ToBaseRelativePath(e.Location);
    StateHasChanged();
}

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

}

I disattached my code for Git to avoid creating issues there.