chore: Gedoppelten Link entfernt damit Demo realistischer wird.

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;
@@ -1920,9 +1953,13 @@ footer {
         align-items: center;
         margin: 2.25rem 0 0 0;
     }
-
+    
     .primary_nav__navlist {
         display: none;
+    }
+
+    .primary_nav__mobile_navlist {
+        display: none;
         position: absolute;
         top: 6.5rem;
         right: 0;

assets/js/nav_toggle.js

@@ -1,9 +1,9 @@
 document.getElementsByClassName('primary_nav__toggle')[0].addEventListener('click', function(){
-	let nav_list = document.getElementsByClassName('primary_nav__navlist')[0]
+	let mobile_nav_list = document.getElementsByClassName('primary_nav__mobile_navlist')[0]
-	if (nav_list.style.display === 'block') {
+	if (mobile_nav_list.style.display === 'block') {
-		nav_list.style.display = 'none';
+		mobile_nav_list.style.display = 'none';
 	} else {
-		nav_list.style.display = 'block';
+		mobile_nav_list.style.display = 'block';
 	}
 });
 

databags/navigation.json

@@ -12,7 +12,7 @@
     "href": "/aktuelles",
     "slug": "aktuelles",
     "visible": true,
-    "list_childs": false,
+    "list_childs": true,
     "items": {
       "Blog": "/blog",
       "Podcast": "/podcast"
@@ -24,8 +24,7 @@
     "visible": true,
     "list_childs": true,
     "items": {
-      "Satzung": "/mitglieder/satzung",
+      "Satzung": "/mitglieder/satzung"
-      "Mitglied werden": "/mitglieder/beitreten"
     }
   }
 }

templates/blocks/navigation.html

@@ -10,29 +10,69 @@
         </div>
 
         <ul class="primary_nav__navlist">
+                {% for title, mapping in bag("navigation").items() %}
+                  {% 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 this._path in mapping['items'].values()
+                                -%}-active{% endif %}" href="{{ mapping.href|url }}">
+                                {{ title }}
+                            </a>
+                        {% elif mapping.list_childs %}
+                            <span class="primary_nav__navlink 
+                                {% if this._path == mapping.href
+                                    or this._path in mapping['items'].values()
+                                    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 " href="{{ mapping.href|url }}">
+                                        {{ title }}
+                                    </a>
+                                </li>
+                                {% 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">
+                                                        <a class="primary_nav__sub_navlink {% if this._path + '/' == child.url_path %}-active{% endif %}" href="{{ child.url_path }}">
+                                                            {{ child.title }}
+                                                        </a>
+                                                    </li>
+                                                {% endif %}
+                                            {% endfor %}
+                                        </ul>
+                                    {% endif %}
+                                {% 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">
-                    {%if not mapping.list_childs %}
+                    <a class="primary_nav__navlink {% if this._path == mapping.href -%}-active{% endif %}" href="{{ mapping.href|url }}">
-                        <a class="primary_nav__navlink {% if this._path == mapping.href or
+                        {{ title }}
-                                                            this._path in mapping['items'].values() or
+                    </a>
-                                                            title == 'Aktuelles' and
+                    {% if mapping.list_childs %}
-                                                            ('blog' in this._path or 'podcast' in this._path)
+                        <ul class="primary_nav__sub_navlist">
-                        %}-active{% endif %}" href="{{ mapping.href|url }}">
-                            {{ title }}
-                        </a>
-                    {% elif mapping.list_childs %}
-                        <span>{{ 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
-                                                                    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>
                             {% set sub_menu = mapping['items'].items() %}
                             {% for sub_title, href in sub_menu %}
                                 <li class="primary_nav__sub_navitem">
@@ -40,29 +80,19 @@
                                         {{ sub_title }}
                                     </a>
                                 </li>
-                                {% if sub_title == 'Blog' %}
+                                {% if sub_title == 'Blog' or sub_title == 'Podcast' %}
                                     {% set children = site.get(href).children %}
-                                    {% for child in children %}
+                                    <ul>
-                                        {% if loop.index <= 3 %}
+                                        {% for child in children %}
-                                            <li class="primary_nav__sub_navitem">
+                                            {% if loop.index <= 3 %}
-                                                <a class="primary_nav__sub_navlink {% if this._path + '/' == child.url_path %}-active{% endif %}" href="{{ child.url_path }}">
+                                                <li class="primary_nav__sub_navitem">
-                                                    {{ child.title }}
+                                                    <a class="primary_nav__sub_navlink {% if this._path + '/' == child.url_path %}-active{% endif %}" href="{{ child.url_path }}">
-                                                </a>
+                                                        {{ child.title }}
-                                            </li>
+                                                    </a>
-                                        {% endif %}
+                                                </li>
-                                    {% endfor %}
+                                            {% endif %}
-                                {% endif %}
+                                        {% endfor %}
-                                {% if sub_title == 'Podcast' %}
+                                    </ul>
-                                    {% 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>