WorkTracker/Components/Layout/MainLayout.razor

@inherits LayoutComponentBase

<div class="page @(sidebarCollapsed ? "sidebar-collapsed" : string.Empty)">
    <div class="sidebar @(sidebarCollapsed ? "sidebar-collapsed" : string.Empty)">
        <NavMenu IsCollapsed="sidebarCollapsed" />
    </div>

    <main>
        <div class="top-row px-4">
            <button
                type="button"
                class="sidebar-toggle"
                @onclick="ToggleSidebar"
                aria-label="Toggle sidebar"
                aria-controls="sidebar-navigation"
                aria-expanded="@(sidebarCollapsed ? "false" : "true")"
                title="Toggle sidebar">
                <span class="sidebar-toggle-bar"></span>
                <span class="sidebar-toggle-bar"></span>
                <span class="sidebar-toggle-bar"></span>
            </button>
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

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

<div id="blazor-error-ui" data-nosnippet>
    An unhandled error has occurred.
    <a href="." class="reload">Reload</a>
    <span class="dismiss">🗙</span>
</div>

@code {
    private bool sidebarCollapsed = true;

    private void ToggleSidebar()
    {
        sidebarCollapsed = !sidebarCollapsed;
    }
}