1. Navmenu.razor:

        <div>
            <nav class="flex-column">
                <div class="nav-item px-3">
                    <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                        <span class="oi oi-home" aria-hidden="true"></span> Home
                    </NavLink>
                </div>
                <div class="nav-item px-3">
                    <NavLink class="nav-link" href="counter">
                        <span class="oi oi-plus" aria-hidden="true"></span> Counter
                    </NavLink>
                </div>
                <div class="nav-item px-3">
                    <NavLink class="nav-link" href="fetchdata">
                        <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
                    </NavLink>
                </div>
            </nav>
        </div>


2. MainLayout.razor:

        @inherits LayoutComponentBase

        <PageTitle>BlazorApp3</PageTitle>

        <div class="page">
            <div class="sidebar @NavMenuCssClass" @onclick="ToggleNavMenu">
                <NavMenu />
            </div>  
            <main>
                <div class="top-row px-4 auth">
                    <div class="container-fluid toggler-container">
                        <button title="Navigation menu" class="navbar-toggler custom-toggler" @onclick="ToggleNavMenu">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <a class="navbar-brand" href="">BlazorServerapp</a>
                    </div> 
                    <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
                </div>

                <article class="content px-4">
                    @Body
                </article>
            </main>
        </div>
        @code {
            private bool collapseNavMenu = true;

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

            private void ToggleNavMenu()
            {
                collapseNavMenu = !collapseNavMenu;
            }
        }

3. Css style:

        .custom-toggler .navbar-toggler-icon {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='1' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
        }

        .custom-toggler.navbar-toggler {
            border-color: rgb(255,102,203);
        }

        .navbar-toggler:focus,
        .navbar-toggler:active,
        .navbar-toggler-icon:focus {
            outline: none;
            box-shadow: none;
        }