simplified-navbar-with-avatar.mustache

<nav class="navbar navbar--simple __js-root">
  <ui-app inline-template>
    <ui-navbar inline-template>
      <div>
        <div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}">
          <div class="navbar__brand my-4 flex items-center lg:pr-8 lg:my-0">
            <a href="#">
              <img src="/images/logo-round-white.svg" class="w-8" />
            </a>
            <span class="pl-4 font-bold text-xl lg:border-r lg:border-grey-300 lg:pr-8">Celostátní fórum 2021</span>
          </div>
          <div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
            <a href="#" @click="show = !show" class="no-underline hover:no-underline">
              <i class="ico--menu text-3xl"></i>
            </a>
          </div>
          <div v-if="show || isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto flex items-center">
            <div class="flex-grow">
              {{> molecules-navbar-menu }}
            </div>
            <div class="flex items-center space-x-4">
              <span class="head-heavy-2xs">{{ person.first }} {{ person.last }}</span>
              {{> atoms-basic-avatar(classes: "avatar--2xs") }}
              <button><i class="ico--log-out"></i></button>
            </div>
          </div>
        </div>
      </div>
    </ui-navbar>
  </ui-app>
</nav>