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');
     }
 }
-