{% comment %}props: [loggedIn,hideTopMenu,links]{% endcomment %}
<header class="site-topnav">
  {% unless hideTopMenu %}
    {% for link in links %}
      {% if link.condition == false %}
        <a href="{{ link.route }}">{{ link.text }}</a>
      {% endif %}

      {% if link.condition.loggedIn and loggedIn %}
        <a href="{{ link.route }}">{{ link.text }}</a>
      {% endif %}

      {% if link.condition.loggedIn == false and loggedIn == false %}
        <a href="{{ link.route }}">{{ link.text }}</a>
      {% endif %}
    {% endfor %}
  {% endunless %}
</header>

<style>
  .site-topnav {
    padding: 2em;
    background-color: var(--color1);
  }
  .site-topnav a {
      color: var(--color2);
      display: inline-block;
      margin-right: 1em;
      text-decoration: none;
      font-weight:bold;
  }
</style>