Data entry menu JS (finally...)

assets/controllers/menu_controller.js

@@ -3,20 +3,51 @@ import { Controller } from '@hotwired/stimulus';
 /**
  * Show / hide items in left-hand menu
  * [template: data_entry.html.twig]
+ * @todo Handle open / closed state
  */
 export default class extends Controller {
-    static targets = ['vocabs', 'records'];
+    static targets = [
+        'vocabs',
+        'records',
+        'vocabIcon',
+        'recordIcon'
+    ];
+    static values = {
+        state: Number,
+    };
+
+    initialize() {
+        const recordsClass = localStorage.getItem('recordsClass');
+        const vocabsClass = localStorage.getItem('vocabsClass');
+        if (recordsClass) {
+            this.recordsTarget.className = recordsClass;
+            this.recordIconTarget.className = recordsClass.includes('hidden') ?
+                this.closeIcon(this.recordIconTarget) :
+                this.openIcon(this.recordIconTarget);
+        }
+        if (vocabsClass) {
+            this.vocabsTarget.className = vocabsClass;
+            this.vocabIconTarget.className = vocabsClass.includes('hidden') ?
+                this.closeIcon(this.vocabIconTarget) :
+                this.openIcon(this.vocabIconTarget);
+        }
+    }
 
     toggle(event) {
         if (event.currentTarget.id === 'for-vocabs') {
             this.vocabsTarget.classList.toggle('is-hidden');
+            localStorage.setItem('vocabsClass', this.vocabsTarget.className);
         }
 
         if (event.currentTarget.id === 'for-records') {
             this.recordsTarget.classList.toggle('is-hidden');
+            localStorage.setItem('recordsClass', this.recordsTarget.className);
         }
 
-        const icon = event.currentTarget.firstElementChild;
+        this.changeIcon(event.currentTarget.firstElementChild);
+    }
+
+    changeIcon(icon) {
         const iconState = icon.className.includes('right') ? 'right' : 'down';
 
         const iconAction = {
@@ -29,6 +60,15 @@ export default class extends Controller {
         };
 
         iconAction[iconState]();
+
+        this.iconClass = icon.className;        
+    }
+
+    openIcon(icon) {
+        return icon.className.replace('right', 'down');
+    }
+
+    closeIcon(icon) {
+        return icon.className.replace('down', 'right');
     }
 }
-

templates/data_entry.html.twig

@@ -59,12 +59,13 @@
 </nav>
 <div class="columns mb-0">
     <div class="column is-one-fifth arcoa-menu mb-0">
-       <aside class="menu" data-controller="menu">
+       <aside class="menu" data-controller="menu"
+        data-menu-state-value="0">
         {% 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" data-action="click->menu#toggle">
-                    <i class="fa fa-angle-right"></i>
+                    <i class="fa fa-angle-right" data-menu-target="vocabIcon"></i>
                 </span>
             </p>
             <ul class="pl-6 is-hidden has-text-white" data-menu-target="vocabs" id="vocabs">
@@ -209,10 +210,12 @@
             <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" data-action="click->menu#toggle">
-                    <i class="fa fa-angle-right"></i>
+                    <i class="fa fa-angle-right" data-menu-target="recordIcon"></i>
                 </span>
             </p>
-            <ul class="pl-6 is-hidden has-text-white" data-menu-target="records" id="records">
+            <ul class="pl-6 is-hidden has-text-white"
+                data-menu-target="records"
+                id="records">
                 <li class="pt-1 pb-1">
                     <a href="{{ path('app_bibliography_landing') }}">
                         Bibliography
@@ -228,6 +231,36 @@
                         Collector
                     </a>
                 </li>
+                <li class="pt-1 pb-1">
+                    <a href="">
+                        Conservation place
+                    </a>
+                </li>
+                <li class="pt-1 pb-1">
+                    <a href="">
+                        Document
+                    </a>
+                </li>
+                <li class="pt-1 pb-1">
+                    <a href="">
+                        Image
+                    </a>
+                </li>
+                <li class="pt-1 pb-1">
+                    <a href="">
+                        Object
+                    </a>
+                </li>
+                <li class="pt-1 pb-1">
+                    <a href="">
+                        Site
+                    </a>
+                </li>
+                <li class="pt-1 pb-1">
+                    <a href="">
+                        3D model
+                    </a>
+                </li>
             </ul>
        </aside>
     </div>