NavMenu.razor 1.1 KB

12345678910111213141516171819202122232425262728293031323334
  1. <div class="top-row ps-3 navbar navbar-dark">
  2. <div class="container-fluid">
  3. <a class="navbar-brand" href="">Kemono.Party Viewer</a>
  4. <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
  5. <span class="navbar-toggler-icon"></span>
  6. </button>
  7. </div>
  8. </div>
  9. <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
  10. <nav class="flex-column">
  11. <div class="nav-item px-3">
  12. <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
  13. <span class="oi oi-home" aria-hidden="true"></span> Search
  14. </NavLink>
  15. </div>
  16. <div class="nav-item px-3">
  17. <NavLink class="nav-link" href="counter">
  18. <span class="oi oi-plus" aria-hidden="true"></span> Favorites
  19. </NavLink>
  20. </div>
  21. </nav>
  22. </div>
  23. @code {
  24. private bool collapseNavMenu = true;
  25. private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
  26. private void ToggleNavMenu()
  27. {
  28. collapseNavMenu = !collapseNavMenu;
  29. }
  30. }