Left menu and dropdown JS to Stimulus

assets/app.js

@@ -6,52 +6,3 @@ import './bootstrap.js';
  * which should already be in your base.html.twig.
  */
 import './styles/app.css';
-
-if (! location.pathname.includes('login')) {
-    const vocabs = document.querySelector('#vocabs');
-    const records = document.querySelector('#records');
-    const userMenu = document.querySelector('.dropdown-trigger');
-    const userCaret = document.querySelector('#user-caret');
-
-    const forVocabs = document.querySelector('#for-vocabs')
-    const forRecords = document.querySelector('#for-records')
-    
-    if (forVocabs) {
-        forVocabs.addEventListener('click', function () {
-            vocabs.classList.toggle('is-hidden');
-
-            if (this.firstElementChild.classList.contains('fa-angle-right')) {
-                this.firstElementChild.classList.remove('fa-angle-right');
-                this.firstElementChild.classList.add('fa-angle-down');
-            } else {
-                this.firstElementChild.classList.remove('fa-angle-down');
-                this.firstElementChild.classList.add('fa-angle-right');
-            }
-        });
-    }
-
-    if (forRecords) {
-        forRecords.addEventListener('click', function () {
-            records.classList.toggle('is-hidden');
-
-            if (this.firstElementChild.classList.contains('fa-angle-right')) {
-                this.firstElementChild.classList.remove('fa-angle-right');
-                this.firstElementChild.classList.add('fa-angle-down');
-            } else {
-                this.firstElementChild.classList.remove('fa-angle-down');
-                this.firstElementChild.classList.add('fa-angle-right');
-            }
-        });
-    }
-
-    userMenu.addEventListener('click', function () {
-        document.querySelector('.dropdown').classList.toggle('is-active');
-        if (userCaret.classList.contains('fa-caret-down')) {
-            userCaret.classList.remove('fa-caret-down');
-            userCaret.classList.add('fa-caret-up');
-        } else {
-            userCaret.classList.remove('fa-caret-up');
-            userCaret.classList.add('fa-caret-down');
-        }
-    });
-}

assets/controllers.json

@@ -2,7 +2,7 @@
     "controllers": {
         "@symfony/ux-turbo": {
             "turbo-core": {
-                "enabled": false,
+                "enabled": true,
                 "fetch": "eager"
             },
             "mercure-turbo-stream": {

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]();
+    }
+}
+

templates/data_entry.html.twig

@@ -13,9 +13,9 @@
     </div>
     {% if app.user %}
     <div class="navbar-end">
-      <div class="navbar-item">
+      <div class="navbar-item" data-controller="dropdown">
-        <div class="buttons dropdown is-right">
+        <div class="buttons dropdown is-right" data-dropdown-target="drop">
-            <div class="dropdown-trigger">
+            <div class="dropdown-trigger" data-action="click->dropdown#toggle">
                 <a class="button is-primary">
                     <span class="icon">
                         <i class="fa fa-user-circle"></i>
@@ -24,7 +24,7 @@
                         {{ app.user.firstname }} {{ app.user.lastname }}
                     </span>
                     <span class="icon">
-                        <i class="fa fa-caret-down" id="user-caret"></i>
+                        <i class="fa fa-caret-down" data-dropdown-target="caret"></i>
                     </span>
                 </a>
             </div>
@@ -59,15 +59,15 @@
 </nav>
 <div class="columns mb-0">
     <div class="column is-one-fifth arcoa-menu mb-0">
-       <aside class="menu">
+       <aside class="menu" data-controller="menu">
         {% if 'ROLE_READER' not in app.user.roles %}
             <p class="menu-label has-text-white mt-3 pt-5 pl-5 is-size-6">
                 Vocabularies
-                <span class="icon is-clickable pl-4" id="for-vocabs">
+                <span class="icon is-clickable pl-4" id="for-vocabs" data-action="click->menu#toggle">
                     <i class="fa fa-angle-right"></i>
                 </span>
             </p>
-            <ul class="pl-6 is-hidden has-text-white" id="vocabs">
+            <ul class="pl-6 is-hidden has-text-white" data-menu-target="vocabs" id="vocabs">
                 <li>
                     <a>
                         <span class="icon pr-3">
@@ -208,21 +208,26 @@
             {% endif %}
             <p class="menu-label has-text-white mt-3 pt-5 pl-5 is-size-6">
                 Records
-                <span class="icon is-clickable pl-4" id="for-records">
+                <span class="icon is-clickable pl-4" id="for-records" data-action="click->menu#toggle">
                     <i class="fa fa-angle-right"></i>
                 </span>
             </p>
-            <ul class="pl-6 is-hidden has-text-white" id="records">
+            <ul class="pl-6 is-hidden has-text-white" data-menu-target="records" id="records">
-                <li>
+                <li class="pt-1 pb-1">
                     <a href="{{ path('app_bibliography_landing') }}">
                         Bibliography
                     </a>
                 </li>
-                <li>
+                <li class="pt-1 pb-1">
                     <a href="{{ path('app_collection_landing') }}">
                         Collection
                     </a>
                 </li>
+                <li class="pt-1 pb-1">
+                    <a href="{{ path('app_collector_landing') }}">
+                        Collector
+                    </a>
+                </li>
             </ul>
        </aside>
     </div>