From d940444fdc50ac6415a8ff1aa4fb06399afb8d67 Mon Sep 17 00:00:00 2001
From: Stephan <spamonia@gmail.com>
Date: Sun, 11 Apr 2021 16:08:56 +0200
Subject: [PATCH] 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.
---
 assets/css/style.css             |  9 +++--
 templates/blocks/navigation.html | 64 +++++++++++++++++++++++++++++++
 templates/header_slim.html       | 65 +-------------------------------
 templates/header_with_logo.html  | 65 +-------------------------------
 4 files changed, 72 insertions(+), 131 deletions(-)
 create mode 100644 templates/blocks/navigation.html

diff --git a/assets/css/style.css b/assets/css/style.css
index 156ab1fe..e9b6cfbb 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -102,8 +102,10 @@ body {
     font-size: 1.25rem;
 }
 
-.primary_nav__navitem.-active .primary_nav__navlink {
+.primary_nav__navlink.-active,
+.primary_nav__sub_navlink.-active  {
     color: var(--wtf-orange);
+    text-decoration: underline;
 }
 
 .primary_nav__navitem.-last, .primary_nav__navitem.-last a {
@@ -115,7 +117,7 @@ body {
     color: var(--wtf-nearly-black);
 }
 
-.primary_nav__sub_navitem .primary_nav__navlink {
+.primary_nav__sub_navlink {
     color: var(--wtf-nearly-white);
 }
 
@@ -1559,7 +1561,8 @@ footer {
         border-top: none;
     }
 
-    .primary_nav__sub_navitem .primary_nav__navlink {
+    .primary_nav__navlink,
+    .primary_nav__sub_navlink {
         color: var(--wtf-nearly-black)
     }
 
diff --git a/templates/blocks/navigation.html b/templates/blocks/navigation.html
new file mode 100644
index 00000000..969eca96
--- /dev/null
+++ b/templates/blocks/navigation.html
@@ -0,0 +1,64 @@
+{% 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 %}
\ No newline at end of file
diff --git a/templates/header_slim.html b/templates/header_slim.html
index 0e61b293..8e14f48a 100644
--- a/templates/header_slim.html
+++ b/templates/header_slim.html
@@ -24,71 +24,8 @@
         </nav>
     </div>
     <div class="header__slim_box">
-        <nav class="header__primary_nav">
-            <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>
+        {% include "blocks/navigation.html" %}
 
-            <ul class="primary_nav__navlist">
-                {% for title, mapping in bag("navigation").items() %}
-                  {% if mapping.visible|default(true) %}
-                    <li class="primary_nav__navitem
-                        {%- if this._path == mapping.href or mapping.href != '/' and this.is_child_of(mapping.href) %}
-                            -active
-                        {%- endif -%}
-                        {%- if loop.index == 1 %}
-                            -first
-                        {%- endif -%}
-                    ">
-                        <a class="primary_nav__navlink {% if this._path == mapping.href %}-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 {%- if this._path == href %} -active{%- endif %}">
-                                        <a class="primary_nav__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 {%- if this._path == href %} -active{%- endif %}">
-                                                    <a class="primary_nav__navlink {% if this._path == href %}-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 {%- if this._path == href %} -active{%- endif %}">
-                                                    <a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ child.url_path }}">
-                                                        {{ child.title }}
-                                                    </a>
-                                                </li>
-                                            {% endif %}
-                                        {% endfor %}
-                                    {% endif %}
-                                {% endfor %}
-                            </ul>
-                        {% endif %}
-                    </li>
-                  {% endif %}
-                {% endfor %}
-            </ul>
-        </nav>
         <div class="slim_box__top_bar_left"></div>
         <div class="slim_box__top_bar_middle"></div>
         <div class="slim_box__top_bar_right"></div>
diff --git a/templates/header_with_logo.html b/templates/header_with_logo.html
index a90f239a..c5f025ef 100644
--- a/templates/header_with_logo.html
+++ b/templates/header_with_logo.html
@@ -24,71 +24,8 @@
         </nav>
     </div>
     <div class="header__bg_box">
-        <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>
+        {% include "blocks/navigation.html" %}
 
-            <ul class="primary_nav__navlist">
-                {% for title, mapping in bag("navigation").items() %}
-                  {% if mapping.visible|default(true) %}
-                    <li class="primary_nav__navitem
-                        {%- if this._path == mapping.href or mapping.href != '/' and this.is_child_of(mapping.href) %}
-                            -active
-                        {%- endif -%}
-                        {%- if loop.index == 1 %}
-                            -first
-                        {%- endif -%}
-                    ">
-                        <a class="primary_nav__navlink {% if this._path == mapping.href %}-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 {%- if this._path == href %} -active{%- endif %}">
-                                        <a class="primary_nav__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 {%- if this._path == href %} -active{%- endif %}">
-                                                    <a class="primary_nav__navlink {% if this._path == href %}-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 {%- if this._path == href %} -active{%- endif %}">
-                                                    <a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ child.url_path }}">
-                                                        {{ child.title }}
-                                                    </a>
-                                                </li>
-                                            {% endif %}
-                                        {% endfor %}
-                                    {% endif %}
-                                {% endfor %}
-                            </ul>
-                        {% endif %}
-                    </li>
-                  {% endif %}
-                {% endfor %}
-            </ul>
-        </nav>
         <!-- background for header box - start -->
         <div class="bg_box__top_bar_left"></div>
         <div class="bg_box__top_bar_middle"></div>