Neighbourhood.omg.lol/Components/Layout/NavMenu.razor

@inject CustomAuthenticationStateProvider AuthStateProvider;
@inject State State;
<nav class="left drawer l">
  <header>
    <nav>
      <AuthorizeView>
        <Authorized>
          <button class="transparent circle large">
            <img class="responsive" src="https://profiles.cache.lol/@State.SelectedAddressName/picture" alt="@State.SelectedAddressName">
            <menu class="no-wrap">
              @foreach (AddressResponseData address in State.AddressList ?? new List<AddressResponseData>()) {
                <a class="row @(address == State.SelectedAddress ? "active" : "")" @onclick="() => changeAddress(address)">
                  <img class="tiny circle" src="https://profiles.cache.lol/@address.Address/picture" alt="@address.Address" />
                  <span class="address"><i class="fa-solid fa-fw fa-at tiny"></i>@address.Address</span>
                </a>
              }
              <a class="row" @onclick='() => AuthStateProvider.Logout()'>
                <i class="fa-solid fa-door-open"></i>
                <span>Logout</span>
              </a>
            </menu>
          </button>
          <div>
            Hey, @State.Name. <br />
            <span class="address"><i class="fa-solid fa-fw fa-at tiny"></i>@State.SelectedAddressName</span>
          </div>
        </Authorized>
        <NotAuthorized>
          <button class="transparent circle large">
            <img class="responsive" src="https://cdn.cache.lol/img/prami.svg">
            <menu class="no-wrap">
              <a class="row" href="/login">
                <i class="fa-solid fa-door-closed"></i>
                <span>Login</span>
              </a>
            </menu>
          </button>
          <div>
            Hey there. <br />
            <a href="/login">Login?</a>
          </div>
        </NotAuthorized>
      </AuthorizeView>
    </nav>
  </header>
  <NavLink class="row nav-link" href="" Match="NavLinkMatch.All">
    <i class="fa-solid fa-fw fa-home"></i>
    <div>Home</div>
  </NavLink>
  <NavLink class="row nav-link" href="/statuslog/latest">
    <i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><path fill="#4dabf7" d="M250 450c-38.388 0-76.775-14.646-106.066-43.934l-100-100c-58.579-58.58-58.579-153.553 0-212.132C100.534 37.336 191.105 35.421 250 88.191c58.898-52.768 149.47-50.853 206.066 5.743 58.58 58.58 58.58 153.553 0 212.132l-100 100C326.778 435.354 288.39 450 250 450" /><path fill="#228be6" d="M220.52 176.634a11.792 11.792 0 1 1-23.586 0 11.792 11.792 0 0 1 23.585 0" /><path fill="#1864ab" stroke="#1864ab" stroke-miterlimit="10" stroke-width="11.32074" d="M220.52 176.634a11.792 11.792 0 1 1-23.586 0 11.792 11.792 0 0 1 23.585 0Z" /><path fill="#228be6" d="M303.066 176.634a11.792 11.792 0 1 1-23.585 0 11.792 11.792 0 0 1 23.585 0" /><path fill="#1864ab" stroke="#1864ab" stroke-miterlimit="10" stroke-width="11.32074" d="M303.066 176.634a11.792 11.792 0 1 1-23.585 0 11.792 11.792 0 0 1 23.585 0Z" /><path fill="#228be6" stroke="#461036" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="18.8679" d="M208.75 223.817c18.875 30.802 63.626 30.802 82.501 0" /><path fill="#1971c2" d="M438.68 212.011c0-32.564-26.399-58.962-58.963-58.962s-58.962 26.398-58.962 58.962 26.398 58.963 58.962 58.963 58.962-26.399 58.962-58.963m-259.433 0c0-32.564-26.398-58.962-58.962-58.962S61.32 179.447 61.32 212.011s26.398 58.963 58.963 58.963 58.962-26.399 58.962-58.963" /><path fill="#4dabf7" stroke="#1864ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="18.8679" d="M208.75 223.817c18.875 30.802 63.626 30.802 82.501 0" /></svg></i>
    <div>Statuslog</div>
  </NavLink>
</nav>

<nav class="left m">
  <header>
    <AuthorizeView>
      <Authorized>
        <button class="transparent circle">
          <img class="responsive" src="https://profiles.cache.lol/@State.SelectedAddressName/picture" alt="@State.SelectedAddressName">
          <menu class="no-wrap">
            <a class="row">
              <img class="tiny" data-emoji="👋">
              <span>Hey, @State.Name.</span>
            </a>
            @foreach (AddressResponseData address in State.AddressList ?? new List<AddressResponseData>()) {
              <a class="row @(address == State.SelectedAddress ? "active" : "")" @onclick="() => changeAddress(address)">
                <img class="tiny circle" src="https://profiles.cache.lol/@address.Address/picture" alt="@address.Address">
                <span class="address"><i class="fa-solid fa-fw fa-at tiny"></i>@address.Address</span>
              </a>
            }
            <a class="row" @onclick='() => AuthStateProvider.Logout()'>
              <i class="fa-solid fa-door-open"></i>
              <span>Logout</span>
            </a>
          </menu>
        </button>
      </Authorized>
      <NotAuthorized>
        <button class="transparent circle">
          <img class="responsive" src="https://cdn.cache.lol/img/prami.svg">
          <menu class="no-wrap">
            <a class="row">
              <i class="medium" data-emoji="👋"></i>
              <span>Hey there.</span>
            </a>
            <a class="row" href="/login">
              <i class="fa-solid fa-door-closed"></i>
              <span>Login</span>
            </a>
          </menu>
        </button>
      </NotAuthorized>
    </AuthorizeView>
  </header>
  <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
    <i class="fa-solid fa-fw fa-home"></i>
    <small>Home</small>
  </NavLink>
  <NavLink class="nav-link" href="/statuslog/latest">
    <i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><path fill="#4dabf7" d="M250 450c-38.388 0-76.775-14.646-106.066-43.934l-100-100c-58.579-58.58-58.579-153.553 0-212.132C100.534 37.336 191.105 35.421 250 88.191c58.898-52.768 149.47-50.853 206.066 5.743 58.58 58.58 58.58 153.553 0 212.132l-100 100C326.778 435.354 288.39 450 250 450" /><path fill="#228be6" d="M220.52 176.634a11.792 11.792 0 1 1-23.586 0 11.792 11.792 0 0 1 23.585 0" /><path fill="#1864ab" stroke="#1864ab" stroke-miterlimit="10" stroke-width="11.32074" d="M220.52 176.634a11.792 11.792 0 1 1-23.586 0 11.792 11.792 0 0 1 23.585 0Z" /><path fill="#228be6" d="M303.066 176.634a11.792 11.792 0 1 1-23.585 0 11.792 11.792 0 0 1 23.585 0" /><path fill="#1864ab" stroke="#1864ab" stroke-miterlimit="10" stroke-width="11.32074" d="M303.066 176.634a11.792 11.792 0 1 1-23.585 0 11.792 11.792 0 0 1 23.585 0Z" /><path fill="#228be6" stroke="#461036" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="18.8679" d="M208.75 223.817c18.875 30.802 63.626 30.802 82.501 0" /><path fill="#1971c2" d="M438.68 212.011c0-32.564-26.399-58.962-58.963-58.962s-58.962 26.398-58.962 58.962 26.398 58.963 58.962 58.963 58.962-26.399 58.962-58.963m-259.433 0c0-32.564-26.398-58.962-58.962-58.962S61.32 179.447 61.32 212.011s26.398 58.963 58.963 58.963 58.962-26.399 58.962-58.963" /><path fill="#4dabf7" stroke="#1864ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="18.8679" d="M208.75 223.817c18.875 30.802 63.626 30.802 82.501 0" /></svg></i>
    <small>Statuslog</small>
  </NavLink>
</nav>

<nav class="bottom s">
  <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
    <i class="fa-solid fa-fw fa-home"></i>
    <small>Home</small>
  </NavLink>
  <NavLink class="nav-link" href="/statuslog/latest">
    <i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><path fill="#4dabf7" d="M250 450c-38.388 0-76.775-14.646-106.066-43.934l-100-100c-58.579-58.58-58.579-153.553 0-212.132C100.534 37.336 191.105 35.421 250 88.191c58.898-52.768 149.47-50.853 206.066 5.743 58.58 58.58 58.58 153.553 0 212.132l-100 100C326.778 435.354 288.39 450 250 450" /><path fill="#228be6" d="M220.52 176.634a11.792 11.792 0 1 1-23.586 0 11.792 11.792 0 0 1 23.585 0" /><path fill="#1864ab" stroke="#1864ab" stroke-miterlimit="10" stroke-width="11.32074" d="M220.52 176.634a11.792 11.792 0 1 1-23.586 0 11.792 11.792 0 0 1 23.585 0Z" /><path fill="#228be6" d="M303.066 176.634a11.792 11.792 0 1 1-23.585 0 11.792 11.792 0 0 1 23.585 0" /><path fill="#1864ab" stroke="#1864ab" stroke-miterlimit="10" stroke-width="11.32074" d="M303.066 176.634a11.792 11.792 0 1 1-23.585 0 11.792 11.792 0 0 1 23.585 0Z" /><path fill="#228be6" stroke="#461036" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="18.8679" d="M208.75 223.817c18.875 30.802 63.626 30.802 82.501 0" /><path fill="#1971c2" d="M438.68 212.011c0-32.564-26.399-58.962-58.963-58.962s-58.962 26.398-58.962 58.962 26.398 58.963 58.962 58.963 58.962-26.399 58.962-58.963m-259.433 0c0-32.564-26.398-58.962-58.962-58.962S61.32 179.447 61.32 212.011s26.398 58.963 58.963 58.963 58.962-26.399 58.962-58.963" /><path fill="#4dabf7" stroke="#1864ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="18.8679" d="M208.75 223.817c18.875 30.802 63.626 30.802 82.501 0" /></svg></i>
    <small>Statuslog</small>
  </NavLink>

  <AuthorizeView>
    <Authorized>
      <NavLink>
        <button class="transparent circle small">
          <img class="responsive" src="https://profiles.cache.lol/@State.SelectedAddressName/picture" alt="@State.SelectedAddressName">
          <menu>
            <a class="row">
              <img class="tiny" data-emoji="👋">
              <span>Hey, @State.Name.</span>
            </a>
            @foreach (AddressResponseData address in State.AddressList ?? new List<AddressResponseData>()) {
              <a class="row @(address == State.SelectedAddress ? "active" : "")" @onclick="() => changeAddress(address)">
                <img class="tiny circle" src="https://profiles.cache.lol/@address.Address/picture" alt="@address.Address">
                <span class="address"><i class="fa-solid fa-fw fa-at tiny"></i>@address.Address</span>
              </a>
            }
            <a class="row" @onclick='() => AuthStateProvider.Logout()'>
              <i class="fa-solid fa-door-open"></i>
              <span>Logout</span>
            </a>
          </menu>
        </button>
        <small class="address"><i class="fa-solid fa-fw fa-at tiny"></i>@State.SelectedAddressName</small>
      </NavLink>
    </Authorized>
    <NotAuthorized>
      <button class="transparent circle">
        <img class="responsive" src="https://cdn.cache.lol/img/prami.svg">
        <menu>
          <a class="row">
            <i class="medium" data-emoji="👋"></i>
            <span>Hey there.</span>
          </a>
          <a class="row" href="/login">
            <i class="fa-solid fa-door-closed"></i>
            <span>Login</span>
          </a>
        </menu>
      </button>
    </NotAuthorized>
  </AuthorizeView>
</nav>

@code {
  public void changeAddress(AddressResponseData address) {
    State.SelectedAddress = address;
  }
}