<nav class="navbar">
  <div class="container container--wide navbar__content">
    <div class="navbar__brand my-2 lg:pr-4 lg:my-0">
      <a href="#">
        <img src="/images/logo-round-white.svg" class="w-full lg:border-r lg:border-grey-300 lg:pr-4" />
      </a>
    </div>
    <div class="navbar__external navbar__section navbar__section--expandable lg:flex lg:space-x-4">
      <div class="text-grey-200 text-sm lg:space-x-4 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-white py-2 lg:py-0") }}
    </div>
    <div class="navbar__main navbar__section navbar__section--expandable">
      <ul class="navbar-menu text-white">
        <li class="navbar-menu__item"><a href="#">Hlavní strana</a></li>
        <li class="navbar-menu__item"><a href="#">Aktuality</a></li>
        <li class="navbar-menu__item"><a href="#">Volby</a></li>
        <li class="navbar-menu__item"><a href="#">Kandidáti</a></li>
        <li class="navbar-menu__item"><a href="#">Pirátské centrum</a></li>
        <li class="navbar-menu__item"><a href="#">Kontakt</a></li>
      </ul>
    </div>
    <div class="navbar__actions navbar__section navbar__section--expandable flex flex-col sm:flex-row lg:flex-col sm:space-x-2 space-y-1 sm:space-y-0 lg:space-y-1 xl:flex-row xl:space-x-1 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 class="navbar__menutoggle my-2 flex justify-end lg:hidden">
      <a href="#">
        <img src="/images/menu-toggle.svg" class="w-4" />
      </a>
    </div>
  </div>
</nav>