header.html

<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="{{ '/' | absolute_url }}">
              <img src="{{ site.styleguide_base_url }}/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">
              {% for item in site.data.menu.top %}
                {% include contact-line.html href=item.url icon=item.icon caption=item.link class="block lg:inline-block" target="_blank" %}
              {% endfor %}
            </div>
          </div>
          <div v-if="show || isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto">
            {% if site.data.menu.main %}
              <ul class="navbar-menu text-white">
                {% for item in site.data.menu.main %}
                  <li class="navbar-menu__item">
                    {% if item.submenu %}
                      <ui-navbar-subitem label="{{ item.name }}">
                        <ul class="navbar-menu__submenu">
                          {% for subitem in item.submenu %}
                            <li><a href="{{ subitem.link }}" class="navbar-menu__link">{{ subitem.name }}</a></li>
                          {% endfor %}
                        </ul>
                      </ui-navbar-subtitem>
                    {% else %}
                      <a href="{{ item.link | relative_url }}" class="navbar-menu__link">{{ item.name }}</a>
                    {% endif %}
                  </li>
                {% endfor %}
              </ul>
            {% endif %}
          </div>
        </div>
      </div>
    </ui-navbar>
  </ui-app>
</nav>

<script>
function replaceHTMLEnts() {
  // Get all <p> elements in the document
  var x = document.querySelectorAll("p");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].innerHTML=htmlDecode(x[i].innerHTML);

  }
  x = document.querySelectorAll("a");
  for (i = 0; i < x.length; i++) {
    if (x[i].hasOwnProperty("font-bold") && x[i].hasOwnProperty("block")) {
          x[i].innerHTML=htmlDecode(x[i].innerHTML);
     }
  }
}

function htmlDecode(input){
  var e = document.createElement('div');
  e.innerHTML = input;
  return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

</script>