fix: Menü in mobile und PC-Version gesplittet.

Etwas Overhead im Template, dafür weniger verschwurbelte Logik.

assets/css/style.css

@@ -82,6 +82,11 @@ body {
     color: var(--wtf-nearly-black);
 }
 
+.primary_nav__mobile_navlist {
+    display: none;
+    z-index: 16;
+}
+
 .primary_nav__navlist {
     margin: 0;
     display: flex;
@@ -1222,6 +1227,10 @@ footer {
         display: flex !important;
     }
 
+    .primary_nav__mobile_navlist {
+        display: none;
+    }
+
     .content__inner_box {
         margin: -0.5rem 1.5rem 0 1.5rem;
     }
@@ -1237,6 +1246,10 @@ footer {
         display: none;
     }
 
+    .primary_nav__mobile_navlist {
+        display: none;
+    }
+
     .primary_nav__navlist {
         display: flex !important;
     }
@@ -1259,6 +1272,10 @@ footer {
         display: none;
     }
 
+    .primary_nav__mobile_navlist {
+        display: none;
+    }
+
     .primary_nav__navlist {
         display: flex !important;
     }
@@ -1295,6 +1312,10 @@ footer {
         display: none;
     }
 
+    .primary_nav__mobile_navlist {
+        display: none;
+    }
+
     .primary_nav__navlist {
         display: flex !important;
     }
@@ -1377,6 +1398,10 @@ footer {
         display: none;
     }
 
+    .primary_nav__mobile_navlist {
+        display: none;
+    }
+
     .primary_nav__navlist {
         display: flex !important;
     }
@@ -1445,6 +1470,10 @@ footer {
         display: none;
     }
 
+    .primary_nav__mobile_navlist {
+        display: none;
+    }
+
     .primary_nav__navlist {
         width: 100%;
         justify-content: space-evenly;
@@ -1619,6 +1648,10 @@ footer {
         margin-right: 1rem;
     }
 
+    .primary_nav__mobile_navlist {
+        display: none;
+    }
+
     .primary_nav__navlist  {
         display: flex !important;
         margin-right: 1.5rem;
@@ -1923,6 +1956,10 @@ footer {
     
     .primary_nav__navlist {
         display: none;
+    }
+
+    .primary_nav__mobile_navlist {
+        display: none;
         position: absolute;
         top: 6.5rem;
         right: 0;

databags/navigation.json

@@ -12,7 +12,7 @@
     "href": "/aktuelles",
     "slug": "aktuelles",
     "visible": true,
-    "list_childs": false,
+    "list_childs": true,
     "items": {
       "Blog": "/blog",
       "Podcast": "/podcast"

templates/blocks/navigation.html

@@ -14,22 +14,24 @@
                   {% if mapping.visible|default(true) %}
                     <li id="{{ mapping.slug }}" class="primary_nav__navitem">
                         {%if not mapping.list_childs %}
-                        <a class="primary_nav__navlink {% if this._path == mapping.href or
+                            <a class="primary_nav__navlink 
-                                                            this._path in mapping['items'].values() or
+                                {% if this._path == mapping.href
-                                                            title == 'Aktuelles' and
+                                    or this._path in mapping['items'].values()
-                                                            ('blog' in this._path or 'podcast' in this._path)
+                                -%}-active{% endif %}" href="{{ mapping.href|url }}">
-                        %}-active{% endif %}" href="{{ mapping.href|url }}">
                                 {{ title }}
                             </a>
                         {% elif mapping.list_childs %}
-                        <span>{{ title }}</span>
+                            <span class="primary_nav__navlink 
+                                {% if this._path == mapping.href
+                                    or this._path in mapping['items'].values()
+                                    or this._path in mapping.href
+                                    or mapping.href == '/aktuelles' and ('blog' in this._path or 'podcast' in this._path)
+                                -%}-active{% endif %}">
+                                {{ title }}
+                            </span>
                             <ul class="primary_nav__sub_navlist -closed">
                                 <li class="primary_nav__sub_navitem">
-                                <a class="primary_nav__sub_navlink {% if this._path == mapping.href or
+                                    <a class="primary_nav__sub_navlink " href="{{ mapping.href|url }}">
-                                                                    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>
                                 </li>
@@ -40,8 +42,9 @@
                                             {{ sub_title }}
                                         </a>
                                     </li>
-                                {% if sub_title == 'Blog' %}
+                                    {% if sub_title == 'Blog' or sub_title == 'Podcast' %}
                                         {% set children = site.get(href).children %}
+                                        <ul>
                                             {% for child in children %}
                                                 {% if loop.index <= 3 %}
                                                     <li class="primary_nav__sub_navitem">
@@ -51,9 +54,36 @@
                                                     </li>
                                                 {% endif %}
                                             {% endfor %}
+                                        </ul>
                                     {% endif %}
-                                {% if sub_title == 'Podcast' %}
+                                {% endfor %}
+                            </ul>
+                        {% endif %}
+                    </li>
+                  {% endif %}
+                {% endfor %}
+            </ul>
+        </nav>
+
+        <ul class="primary_nav__mobile_navlist">
+            {% for title, mapping in bag("navigation").items() %}
+              {% if mapping.visible|default(true) %}
+                <li id="{{ mapping.slug }}" class="primary_nav__navitem">
+                    <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">
+                                    <a class="primary_nav__sub_navlink {% if this._path == href %}-active{% endif %}" href="{{ href|url }}">
+                                        {{ sub_title }}
+                                    </a>
+                                </li>
+                                {% if sub_title == 'Blog' or sub_title == 'Podcast' %}
                                     {% set children = site.get(href).children %}
+                                    <ul>
                                         {% for child in children %}
                                             {% if loop.index <= 3 %}
                                                 <li class="primary_nav__sub_navitem">
@@ -63,6 +93,7 @@
                                                 </li>
                                             {% endif %}
                                         {% endfor %}
+                                    </ul>
                                 {% endif %}
                             {% endfor %}
                         </ul>