/ src / GradeView / Shared / NavMenu.razor
NavMenu.razor
 1  <div class="top-row pl-4 navbar navbar-dark">
 2      <a class="navbar-brand" href="">GradeView</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  }