feat: implement screendesign

assets/controllers/toggle_controller.js

@@ -1,8 +1,8 @@
-import { Controller } from '@hotwired/stimulus'
+import {Controller} from '@hotwired/stimulus'
 
 export default class extends Controller {
-    static classes = ['closed']
-    static targets = ['toggle', 'icon']
+    static classes = ['closed', 'open', 'iconOpen']
+    static targets = ['content', 'icon', 'container']
     static values = {
         open: {
             type: Boolean,
@@ -15,7 +15,7 @@ export default class extends Controller {
     }
 
     initialize() {
-        this.target = this.hasToggleTarget ? this.toggleTarget : this.element
+        this.target = this.hasContentTarget ? this.contentTarget : this.element
 
         // Restore state from storage if storageKey is provided
         if (this.hasStorageKey()) {
@@ -39,7 +39,16 @@ export default class extends Controller {
         this.target.classList.toggle(this.closedClass, false === open)
 
         if (this.hasIconTarget) {
-            this.iconTarget.classList.toggle('rotate-90', true === open)
+            let iconClass = this.hasIconOpenClass ? this.iconOpenClass : 'rotate-90'
+            this.iconTarget.classList.toggle(iconClass, true === open)
+        }
+
+        // Toggle class on container element (or controller element) if specified
+        if (this.hasOpenClass) {
+            const container = this.hasContainerTarget ? this.containerTarget : this.element
+            this.openClasses.forEach(cls => {
+                container.classList.toggle(cls, true === open)
+            })
         }
 
         // Save state to storage if storageKey is provided