Start using Stimulus

webgis/js/controllers/menu_controller.js

@@ -0,0 +1,46 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ['list', 'menu'];
+
+    toggleMenu(event) {
+        const target = event.currentTarget;
+        const id = target.getAttribute('data-id');
+
+        this.menuTarget.classList.toggle('is-hidden');
+
+        this.openList(`#${id}-list`);
+
+        console.log(this.menuTarget);
+    }
+
+    openList(id) {
+        document.querySelector(id).classList.remove('is-hidden');
+    }
+
+    toggle(event) {
+        const target = event.currentTarget; 
+        const targetIcon = target.querySelector('.fa');
+        const id = target.getAttribute('data-id');
+        const listId = `${id}-list`;
+        const list = this.listTargets.find(t => t.id === listId);
+
+        if (list) {
+            list.classList.toggle('is-hidden');
+        }
+
+        this.toggleIcon(targetIcon);
+    }
+
+    toggleIcon(icon) {
+        if (icon.classList.contains('fa-chevron-right')) {
+            icon.classList.remove('fa-chevron-right');
+            icon.classList.add('fa-chevron-down');
+        } else {
+            icon.classList.add('fa-chevron-right');
+            icon.classList.remove('fa-chevron-down');
+        }
+
+        return icon;
+    }
+}