diff --git a/assets/controllers/menu_controller.js b/assets/controllers/menu_controller.js index 995c79f..6db5572 100644 --- a/assets/controllers/menu_controller.js +++ b/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'); } } - diff --git a/templates/data_entry.html.twig b/templates/data_entry.html.twig index 7d6b9ba..a8cd84c 100644 --- a/templates/data_entry.html.twig +++ b/templates/data_entry.html.twig @@ -59,12 +59,13 @@
-