@defer (when store) {
  <navbar>
    <div class="items-left">
       <oimg [src]="store.chatData.pfp" height="50px" width="50px" [radius]="15"></oimg>
      <div class="chat-data">
        @if (store.chatData.displayName == "") {
          <span class="main-name">{{'@'+store.chatData.username}}</span>
        } @else {
          <span class="main-name">{{store.chatData.displayName}}</span>
          <span class="alt-name">{{'@'+store.chatData.username}}</span>
        }
      </div>
    </div>

    <div class="items-right">
      <button tuiButton appearance="flat">
        <tui-icon icon="@tui.phone"/>
      </button>
    </div>
  </navbar>

  <main>

  </main>

  <message-box/>
}