<nav class="navbar">
  <div class="container container--wide navbar__content">
    <div class="navbar__brand my-4 lg:pr-8 lg:my-0">
      <a href="#">
        <img src="/images/logo-round-white.svg" class="w-full lg:border-r lg:border-grey-300 lg:pr-8" />
      </a>
    </div>
    <div class="navbar__external navbar__section navbar__section--expandable lg:flex lg:space-x-8">
      <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-white py-4 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="#" class="navbar-menu__link">Hlavní strana</a>
        </li>
        <li class="navbar-menu__item">
          <a href="#" class="navbar-menu__link">Aktuality</a>
        </li>
        <li class="navbar-menu__item">
          <a href="#" class="navbar-menu__link navbar-menu__submenu-toggle">Volby</a>
          <ul class="navbar-menu__submenu lg:hidden">
            <li><a href="#" class="navbar-menu__link">Kandidáti</a></li>
            <li><a href="#" class="navbar-menu__link">Program</a></li>
          </ul>
        </li>
        <li class="navbar-menu__item">
          <a href="#" class="navbar-menu__link">Kandidáti</a>
        </li>
        <li class="navbar-menu__item">
          <a href="#" class="navbar-menu__link">Pirátské centrum</a>
        </li>
        <li class="navbar-menu__item">
          <a href="#" class="navbar-menu__link">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-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 class="navbar__menutoggle my-4 flex justify-end lg:hidden">
      <a href="#">
        <img src="/images/menu-toggle.svg" class="w-8" />
      </a>
    </div>
  </div>
</nav>
