navbar.mustache

<nav class="navbar __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:block lg:pr-8 lg:my-0">
            <a href="#">
              <img src="/images/logo-round-white.svg" class="w-8 lg:w-full lg:border-r lg:border-grey-300 lg:pr-8" />
            </a>
            <span class="lg:hidden pl-4 font-bold text-xl">Pirátská strana</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__external navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto lg:flex lg:space-x-8 lg:pb-2">
            <div class="text-grey-200 text-sm lg:space-x-8 leading-loose lg:leading-normal">
              {{> atoms-basic-contact-line(caption: "pirati.cz", icon: "ico--home", classes: "block lg:inline-block") }}
              {{> atoms-basic-contact-line(caption: "piratskyobchod.cz", icon: "ico--cart", classes: "block lg:inline-block") }}
              {{> atoms-basic-contact-line(caption: "piratskelisty.cz", icon: "ico--newspaper", classes: "block lg:inline-block") }}
            </div>
            {{> molecules-basic-social-icon-group(classes: "text-grey-200 py-4 lg:py-0") }}
          </div>
          <div v-if="show || isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto">
            <ul class="navbar-menu text-white">
              <li class="navbar-menu__item">
                <a href="#" data-href="{{ link.templates-homepage }}" class="navbar-menu__link">Hlavní strana</a>
              </li>
              <li class="navbar-menu__item">
                <ui-navbar-subitem label="Lidé">
                  <ul class="navbar-menu__submenu">
                    <li><a href="#" data-href="{{ link.templates-people }}" class="navbar-menu__link">Delší link co je delší než hlavní menu položka</a></li>
                  </ul>
                </ui-navbar-subtitem>
              </li>
              <li class="navbar-menu__item">
                <ui-navbar-subitem label="Aktuality" href="{{ link.templates-article-listing }}">
                  <ul class="navbar-menu__submenu">
                    <li><a href="#" data-href="{{ link.templates-article-detail }}" class="navbar-menu__link">Detail aktuality</a></li>
                  </ul>
                </ui-navbar-subtitem>
              </li>
              <li class="navbar-menu__item">
                <ui-navbar-subitem label="Volby">
                  <ul class="navbar-menu__submenu">
                    <li><a href="#" data-href="{{ link.templates-elections }}" class="navbar-menu__link">Volební rozcestník</a></li>
                  </ul>
                </ui-navbar-subtitem>
              </li>
              <li class="navbar-menu__item">
                <a href="#" data-href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>
              </li>
              <li class="navbar-menu__item">
                <a href="#" data-href="{{ link.templates-contact }}" class="navbar-menu__link">Kontakt</a>
              </li>
            </ul>
          </div>
          <div v-if="show || isLgScreenSize" class="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-col sm:flex-row lg:flex-col sm:space-x-4 space-y-2 sm:space-y-0 lg:space-y-2 xl:flex-row xl:space-x-2 xl:space-y-0">
            {{> atoms-icon-button(cta: "Přispěj", icon: "ico--pig", classes: "btn--cyan-200 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
            {{> atoms-icon-button(cta: "Naloď se", icon: "ico--anchor", classes: "btn--blue-300 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
          </div>
        </div>
      </div>
    </ui-navbar>
  </ui-app>
</nav>