Left menu and dropdown JS to Stimulus

assets/controllers/dropdown_controller.js

@@ -0,0 +1,26 @@
+import { Controller } from '@hotwired/stimulus';
+
+/**
+ * Activate a dropdown menu and toggle icon
+ * [template: data_entry.html.twig]
+ */
+export default class extends Controller {
+    static targets = ['drop', 'caret'];
+
+    toggle() {
+        // Show / hide dropdown
+        this.dropTarget.classList.toggle('is-active');
+        const caretTarget = this.caretTarget;
+        const caretState = caretTarget.className.includes('down') ? 'down' : 'up';
+        const caretAction = {
+            'down': function(target) {
+                target.className = target.className.replace('down', 'up');
+            },
+            'up': function(target) {
+                target.className = target.className.replace('up', 'down');
+            }
+        };
+
+        caretAction[caretState](this.caretTarget);
+    }
+}

assets/controllers/menu_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from '@hotwired/stimulus';
+
+/**
+ * Show / hide items in left-hand menu
+ * [template: data_entry.html.twig]
+ */
+export default class extends Controller {
+    static targets = ['vocabs', 'records'];
+
+    toggle(event) {
+        if (event.currentTarget.id === 'for-vocabs') {
+            this.vocabsTarget.classList.toggle('is-hidden');
+        }
+
+        if (event.currentTarget.id === 'for-records') {
+            this.recordsTarget.classList.toggle('is-hidden');
+        }
+
+        const icon = event.currentTarget.firstElementChild;
+        const iconState = icon.className.includes('right') ? 'right' : 'down';
+
+        const iconAction = {
+            'right': function() {
+                icon.className = icon.className.replace('right', 'down');
+            },
+            'down': function() {
+                icon.className = icon.className.replace('down', 'right');
+            }
+        };
+
+        iconAction[iconState]();
+    }
+}
+