Skip to content
Snippets Groups Projects
Select Git revision
  • aac6d1d3cb6ab603ac90ef62253fe11ace92db8a
  • master default protected
  • feat/new-image-formats
  • clickable-select-chevron
  • 2.20.0
  • 2.19.0
  • 2.18.0
  • 2.17.0
  • 2.16.1
  • 2.16.0
  • 2.15.0
  • 2.14.0
  • 2.13.0
  • 2.12.1
  • 2.11.0
  • 2.10.0
  • 2.9.1
  • 2.9.0
  • 2.8.0
  • 2.7.1
  • 2.7.0
  • 2.6.0
  • 2.5.2
  • 2.5.1
24 results

simplified-navbar-with-avatar.mustache

Blame
  • simplified-navbar-with-avatar.mustache 2.14 KiB
    <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>
              <div class="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-row items-center">
                <div class="inline-flex items-center order-first md:order-last md:ml-8 lg:order-first lg:mr-8 lg:ml-0">
                  <span class="relative inline-flex h-4 w-4 mr-4" title="Jsi online">
                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-green-400"></span>
                    <span class="inline-flex rounded-full w-4 h-4 bg-green-400"></span>
                  </span>
                  <span class="hidden md:block text-grey-200">Jsi online</span>
                </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 class="text-grey-200 hover:text-white"><i class="ico--log-out"></i></button>
                </div>
              </div>
            </div>
          </div>
        </ui-navbar>
      </ui-app>
    </nav>