navbar.mustache

<nav class="navbar __js-root" data-app="Navbar">
  <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">
            <img src="/images/menu-toggle.svg" class="w-8" />
          </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: "fas fa-home", classes: "block lg:inline-block") }}
            {{> atoms-basic-contact-line(caption: "piratskyobchod.cz", icon: "fas fa-shopping-cart", classes: "block lg:inline-block") }}
            {{> atoms-basic-contact-line(caption: "piratskelisty.cz", icon: "fas fa-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="{{ link.templates-homepage }}" class="navbar-menu__link">Hlavní strana</a>
            </li>
            <li class="navbar-menu__item">
              <a href="{{ link.templates-people }}" class="navbar-menu__link">Lidé</a>
            </li>
            <li class="navbar-menu__item">
              <ui-navbar-subitem label="Aktuality" href="{{ link.templates-article-listing }}">
                <ul class="navbar-menu__submenu">
                  <li><a 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="{{ link.templates-elections-candidates }}" class="navbar-menu__link">Kandidáti</a></li>
                  <li><a href="{{ link.templates-elections-program }}" class="navbar-menu__link">Program</a></li>
                </ul>
              </ui-navbar-subtitem>
            </li>
            <li class="navbar-menu__item">
              <a href="{{ link.templates-elections-candidates }}" class="navbar-menu__link">Kandidáti</a>
            </li>
            <li class="navbar-menu__item">
              <a href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>
            </li>
            <li class="navbar-menu__item">
              <a 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: "fas fa-hand-holding-usd", classes: "btn--white btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
          {{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--green-100 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
        </div>
      </div>
    </div>
  </ui-navbar>
</nav>