ZeroSpace/ZeroSpace/ZeroSpace.Web/Layout/NavMenu.razor

<div class="nav-wrapper d-flex flex-column h-100 @(IsCollapsed ? "is-collapsed" : "")">
    <div class="top-row navbar navbar-dark d-flex align-items-center @(IsCollapsed ? "justify-content-center px-1" : "justify-content-between px-3")">
            @if (!IsCollapsed)
            {
                <a class="navbar-brand d-flex align-items-center me-0" href="galaxy" title="ZeroSpace Database & Command Hub">
                    <span class="brand-glow me-2">✦</span>
                    <span class="brand-text">ZeroSpace</span>
                </a>
                <div class="d-flex align-items-center">
                    <button type="button" class="btn btn-sm btn-nav-toggle nav-toggle-btn"
                            @onclick="ToggleCollapse"
                            title="Collapse navigation"
                            aria-label="Collapse navigation">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5M10 8a.5.5 0 0 1-.5.5H4.207l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L4.207 7.5H9.5a.5.5 0 0 1 .5.5"/>
                        </svg>
                    </button>
                    <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleMobileMenu">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                </div>
            }
            else
            {
                <div class="d-flex align-items-center justify-content-center gap-1 w-100">
                    <a class="navbar-brand d-flex align-items-center m-0 p-0" href="galaxy" title="ZeroSpace Database & Command Hub">
                        <span class="brand-glow">✦</span>
                    </a>
                    <button type="button" class="btn btn-sm btn-nav-toggle nav-toggle-btn"
                            @onclick="ToggleCollapse"
                            title="Expand navigation"
                            aria-label="Expand navigation">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M3.5 15a.5.5 0 0 0 .5-.5v-13a.5.5 0 0 0-1 0v13a.5.5 0 0 0 .5.5M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8"/>
                        </svg>
                    </button>
                </div>
            }
        </div>

        <div class="@NavMenuCssClass nav-scrollable flex-grow-1" @onclick="OnNavMenuClick">
            <nav class="nav flex-column">
                @foreach (var entry in SiteMap.NavEntries)
                {
                    <div class="nav-item @(IsCollapsed ? "px-1" : "px-3")">
                        <NavLink class="nav-link" href="@entry.Href" Match="@entry.Match" title="@entry.Title">
                            <span class="@entry.IconCss" aria-hidden="true"></span>
                            @if (!IsCollapsed)
                            {
                                <span class="nav-text">@entry.Title</span>
                                @if (entry.Badge is not null)
                                {
                                    <span class="badge badge-nav-live ms-auto">@entry.Badge</span>
                                }
                            }
                        </NavLink>
                    </div>
                }
            </nav>
        </div>

        <div class="sidebar-footer p-2 nav-toggle-btn">
            <button type="button" class="btn btn-nav-toggle-footer w-100 d-flex align-items-center justify-content-center"
                    @onclick="ToggleCollapse"
                    title="@(IsCollapsed ? "Expand sidebar" : "Collapse sidebar")"
                    aria-label="@(IsCollapsed ? "Expand sidebar" : "Collapse sidebar")">
                @if (IsCollapsed)
                {
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M3.5 15a.5.5 0 0 0 .5-.5v-13a.5.5 0 0 0-1 0v13a.5.5 0 0 0 .5.5M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8"/>
                    </svg>
                }
                else
                {
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" class="me-2">
                        <path fill-rule="evenodd" d="M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5M10 8a.5.5 0 0 1-.5.5H4.207l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L4.207 7.5H9.5a.5.5 0 0 1 .5.5"/>
                    </svg>
                    <span class="fs-7 text-uppercase fw-semibold">Collapse</span>
                }
            </button>
        </div>
    </div>

@code {
    [Parameter]
    public bool IsCollapsed { get; set; } = false;

    [Parameter]
    public EventCallback<bool> IsCollapsedChanged { get; set; }

    private bool _collapseMobileNav = true;

    private string? NavMenuCssClass => _collapseMobileNav ? "collapse" : null;

    private async Task ToggleCollapse()
    {
        IsCollapsed = !IsCollapsed;
        await IsCollapsedChanged.InvokeAsync(IsCollapsed);
    }

    private void ToggleMobileMenu()
    {
        _collapseMobileNav = !_collapseMobileNav;
    }

    private void OnNavMenuClick()
    {
        _collapseMobileNav = true;
    }
}