wtf-webseite/templates/blocks/navigation.html
Stephan d940444fdc Moved navigation to separate block and fixed highlighting of active page.
Highlighting is done via color (orange) and typography (underline) on purpose to make it recognizable even if one can't see colors properly.
2021-04-11 16:08:56 +02:00

64 lines
3.5 KiB
HTML

{% block navigation %}
<nav class="header__primary_nav -logo_header">
<div class="primary_nav__toggle">
<svg viewBox="0 0 100 80" width="32" height="32">
<rect width="100" height="15"></rect>
<rect y="30" width="100" height="15"></rect>
<rect y="60" width="100" height="15"></rect>
</svg>
<p>menu</p>
</div>
<ul class="primary_nav__navlist">
{% for title, mapping in bag("navigation").items() %}
{% if mapping.visible|default(true) %}
<li class="primary_nav__navitem">
<a class="primary_nav__navlink {% if this._path == mapping.href or
this._path in mapping['items'].values() or
title == 'Aktuelles' and
('blog' in this._path or 'podcast' in this._path)
%}-active{% endif %}" href="{{ mapping.href|url }}">
{{ title }}
</a>
{% if mapping.list_childs %}
<ul class="primary_nav__sub_navlist">
{% set sub_menu = mapping['items'].items() %}
{% for sub_title, href in sub_menu %}
<li class="primary_nav__sub_navitem">
<a class="primary_nav__sub_navlink {% if this._path == href %}-active{% endif %}" href="{{ href|url }}">
{{ sub_title }}
</a>
</li>
{% if sub_title == 'Blog' %}
{% set children = site.get(href).children %}
{% for child in children %}
{% if loop.index <= 3 %}
<li class="primary_nav__sub_navitem">
<a class="primary_nav__sub_navlink {% if this._path + '/' == child.url_path %}-active{% endif %}" href="{{ child.url_path }}">
{{ child.title }}
</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
{% if sub_title == 'Podcast' %}
{% set children = site.get(href).children %}
{% for child in children %}
{% if loop.index <= 3 %}
<li class="primary_nav__sub_navitem">
<a class="primary_nav__sub_navlink {% if this._path + '/' == child.url_path %}-active{% endif %}" href="{{ child.url_path }}">
{{ child.title }}
</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</ul>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
</nav>
{% endblock %}