WorkTracker/Components/Layout/NavMenu.razor

@using Microsoft.Extensions.Options
@using WorkTracker.Configuration
@inject IOptions<AppAuthOptions> AppAuthOptions

@code {
    [Parameter] public bool IsCollapsed { get; set; }
    [Parameter] public EventCallback OnToggleSidebar { get; set; }

    private Task ToggleSidebarAsync()
    {
        return OnToggleSidebar.InvokeAsync();
    }
}

<div class="nav-menu-shell @(IsCollapsed ? "nav-menu-shell-collapsed" : string.Empty)" data-testid="sidebar-shell" data-collapsed="@(IsCollapsed ? "true" : "false")">
<div class="top-row ps-3 pe-3 navbar navbar-dark">
    <div class="container-fluid nav-menu-header">
        <button
            type="button"
            class="sidebar-toggle"
            @onclick="ToggleSidebarAsync"
            aria-label="Toggle sidebar"
            aria-controls="sidebar-navigation"
            aria-expanded="@(IsCollapsed ? "false" : "true")"
            title="Toggle sidebar">
            <span class="sidebar-toggle-bar"></span>
            <span class="sidebar-toggle-bar"></span>
            <span class="sidebar-toggle-bar"></span>
        </button>
    </div>
</div>

<div class="nav-scrollable">
    <nav id="sidebar-navigation" class="nav flex-column" aria-label="Sidebar navigation">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All" aria-label="Dashboard" title="Dashboard">
                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span>
                <span class="nav-label">Dashboard</span>
            </NavLink>
        </div>

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="grid" aria-label="Grid View" title="Grid View">
                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span>
                <span class="nav-label">Grid View</span>
            </NavLink>
        </div>

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="calendar" aria-label="Calendar" title="Calendar">
                <span class="bi bi-calendar3-nav-menu" aria-hidden="true"></span>
                <span class="nav-label">Calendar</span>
            </NavLink>
        </div>

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="summary" aria-label="Summary" title="Summary">
                <span class="bi bi-bar-chart-fill-nav-menu" aria-hidden="true"></span>
                <span class="nav-label">Summary</span>
            </NavLink>
        </div>

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="yearly-summary" aria-label="Yearly Summary" title="Yearly Summary">
                <span class="bi bi-table-nav-menu" aria-hidden="true"></span>
                <span class="nav-label">Yearly Summary</span>
            </NavLink>
        </div>

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="settings" aria-label="Settings" title="Settings">
                <span class="bi bi-gear-fill-nav-menu" aria-hidden="true"></span>
                <span class="nav-label">Settings</span>
            </NavLink>
        </div>

        <AuthorizeView>
            <Authorized>
                <div class="nav-item px-3">
                    <NavLink class="nav-link" href="auth" aria-label="@context.User.Identity?.Name" title="@context.User.Identity?.Name">
                        <span class="bi bi-person-fill-nav-menu" aria-hidden="true"></span>
                        <span class="nav-label">@context.User.Identity?.Name</span>
                    </NavLink>
                </div>
                @if (AppAuthOptions.Value.Enabled)
                {
                    <div class="nav-item px-3">
                        <form action="/api/logout" method="post">
                            <button type="submit" class="nav-link" aria-label="Logout" title="Logout">
                                <span class="bi bi-arrow-bar-left-nav-menu" aria-hidden="true"></span>
                                <span class="nav-label">Logout</span>
                            </button>
                        </form>
                    </div>
                }
            </Authorized>
            <NotAuthorized>
                <div class="nav-item px-3">
                    <NavLink class="nav-link" href="login" aria-label="Login" title="Login">
                        <span class="bi bi-person-badge-nav-menu" aria-hidden="true"></span>
                        <span class="nav-label">Login</span>
                    </NavLink>
                </div>
            </NotAuthorized>
        </AuthorizeView>
    </nav>
</div>
</div>