NavMenu.razor
1 <div class="top-row pl-4 navbar navbar-dark"> 2 <a class="navbar-brand" href="">PingUp</a> 3 <button class="navbar-toggler" @onclick="ToggleNavMenu"> 4 <span class="navbar-toggler-icon"></span> 5 </button> 6 </div> 7 8 <div class="@NavMenuCssClass" @onclick="ToggleNavMenu"> 9 <ul class="nav flex-column"> 10 <li class="nav-item px-3"> 11 <NavLink class="nav-link" href="" Match="NavLinkMatch.All"> 12 <span class="oi oi-home" aria-hidden="true"></span> Home 13 </NavLink> 14 </li> 15 <li class="nav-item px-3"> 16 <NavLink class="nav-link" href="counter"> 17 <span class="oi oi-plus" aria-hidden="true"></span> Counter 18 </NavLink> 19 </li> 20 <li class="nav-item px-3"> 21 <NavLink class="nav-link" href="fetchdata"> 22 <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data 23 </NavLink> 24 </li> 25 </ul> 26 </div> 27 28 @code { 29 bool collapseNavMenu = true; 30 31 string NavMenuCssClass => collapseNavMenu ? "collapse" : null; 32 33 void ToggleNavMenu() 34 { 35 collapseNavMenu = !collapseNavMenu; 36 } 37 }