From 39d51fadbc030190f158a85763e48ec33f4ef7ce Mon Sep 17 00:00:00 2001
From: muli <muli@mrmuli.de>
Date: Sun, 21 Jan 2024 21:42:06 +0100
Subject: [PATCH] feat: WIP: DropDown via JS implementiert.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sieht noch scheiße aus, soll zum Test, ob das grundsätzlich geht aber reichen.
---
 assets/css/style.css             |  4 ++--
 assets/js/nav_toggle.js          | 14 ++++++++++++++
 databags/navigation.json         |  5 ++++-
 templates/blocks/navigation.html | 21 ++++++++++++---------
 4 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index d8ac037..885f3be 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -129,12 +129,12 @@ body {
     text-decoration: underline;
 }
 
-.primary_nav__sub_navlist {
+.primary_nav__sub_navlist.-closed {
     display: none;
     z-index: 20;
 }
 
-.primary_nav__navlist > li:hover > .primary_nav__sub_navlist {
+.primary_nav__sub_navlist.-open {
     display: block;
     margin: 2.6rem 0 0 -0.5rem;
     padding: 0;
diff --git a/assets/js/nav_toggle.js b/assets/js/nav_toggle.js
index 3cd58cf..9242ba1 100644
--- a/assets/js/nav_toggle.js
+++ b/assets/js/nav_toggle.js
@@ -6,3 +6,17 @@ document.getElementsByClassName('primary_nav__toggle')[0].addEventListener('clic
 		nav_list.style.display = 'block';
 	}
 });
+
+let primary_menu_items = document.getElementsByClassName('primary_nav__navitem');
+for (let i = 0; i < primary_menu_items.length; i++) {
+	primary_menu_items[i].addEventListener('click', function(event) {
+		let dropdown = event.currentTarget.firstElementChild;
+		if (dropdown.classList.contains('-closed')) {
+			dropdown.classList.remove('-closed');
+			dropdown.classList.add('-open');
+		} else {
+			dropdown.classList.remove('-open');
+			dropdown.classList.add('-closed');
+		}
+	});
+}
diff --git a/databags/navigation.json b/databags/navigation.json
index 292ce51..2f6346b 100644
--- a/databags/navigation.json
+++ b/databags/navigation.json
@@ -1,6 +1,7 @@
 {
   "Was wir tun": {
     "href": "/about",
+    "slug": "about",
     "visible": true,
     "list_childs": false,
     "items": {
@@ -9,6 +10,7 @@
   },
   "Was geht ab?": {
     "href": "/aktuelles",
+    "slug": "aktuelles",
     "visible": true,
     "list_childs": false,
     "items": {
@@ -18,8 +20,9 @@
   },
   "Mitglied werden": {
     "href": "/mitglieder",
+    "slug": "mitglieder",
     "visible": true,
-    "list_childs": false,
+    "list_childs": true,
     "items": {
       "Satzung": "/mitglieder/satzung",
       "Mitglied werden": "/mitglieder/beitreten"
diff --git a/templates/blocks/navigation.html b/templates/blocks/navigation.html
index 969eca9..4ef61d9 100644
--- a/templates/blocks/navigation.html
+++ b/templates/blocks/navigation.html
@@ -12,16 +12,19 @@
         <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>
+                <li id="{{ mapping.slug }}" class="primary_nav__navitem">
+                    {{ title }}
                     {% if mapping.list_childs %}
-                        <ul class="primary_nav__sub_navlist">
+                        <ul class="primary_nav__sub_navlist -closed">
+                            <li>
+                                <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>
+                            </li>
                             {% set sub_menu = mapping['items'].items() %}
                             {% for sub_title, href in sub_menu %}
                                 <li class="primary_nav__sub_navitem">