From a69ea4694579db1620bca28e773227e97da5e59b Mon Sep 17 00:00:00 2001
From: Yassine Guedidi <yassine@guedidi.com>
Date: Sat, 1 Mar 2025 00:35:24 +0100
Subject: [PATCH] Extract Materialize Collapsible controller

---
 .../materialize/collapsible_controller.js        | 16 ++++++++++++++++
 assets/index.js                                  |  4 ----
 templates/Developer/index.html.twig              |  2 +-
 templates/Entry/entry.html.twig                  |  2 +-
 4 files changed, 18 insertions(+), 6 deletions(-)
 create mode 100644 assets/controllers/materialize/collapsible_controller.js

diff --git a/assets/controllers/materialize/collapsible_controller.js b/assets/controllers/materialize/collapsible_controller.js
new file mode 100644
index 000000000..b9e60f38c
--- /dev/null
+++ b/assets/controllers/materialize/collapsible_controller.js
@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus';
+import M from '@materializecss/materialize';
+
+export default class extends Controller {
+  static values = {
+    accordion: { type: Boolean, default: true },
+  };
+
+  connect() {
+    this.instance = M.Collapsible.init(this.element, { accordion: this.accordionValue });
+  }
+
+  disconnect() {
+    this.instance.destroy();
+  }
+}
diff --git a/assets/index.js b/assets/index.js
index 675db5dab..7d53241c3 100755
--- a/assets/index.js
+++ b/assets/index.js
@@ -273,10 +273,6 @@ const articleScroll = () => {
 
 $(document).ready(() => {
   $('select').formSelect();
-  $('.collapsible[data-collapsible="accordion"]').collapsible();
-  $('.collapsible[data-collapsible="expandable"]').collapsible({
-    accordion: false,
-  });
 
   $('.dropdown-trigger').dropdown({ hover: false });
   $('.dropdown-trigger[data-covertrigger="false"][data-constrainwidth="false"]').dropdown({
diff --git a/templates/Developer/index.html.twig b/templates/Developer/index.html.twig
index fa437d0ae..69cb0498d 100644
--- a/templates/Developer/index.html.twig
+++ b/templates/Developer/index.html.twig
@@ -25,7 +25,7 @@
 
                 <h4>{{ 'developer.existing_clients.title'|trans }}</h4>
                 {% if clients %}
-                    <ul class="collapsible" data-collapsible="expandable">
+                    <ul class="collapsible" data-controller="materialize--collapsible" data-materialize--collapsible-accordion-value="false">
                         {% for client in clients %}
                             <li>
                                 <div class="collapsible-header">{{ client.name }} - #{{ client.id }}</div>
diff --git a/templates/Entry/entry.html.twig b/templates/Entry/entry.html.twig
index 33e0b5dcf..20a88e7b8 100644
--- a/templates/Entry/entry.html.twig
+++ b/templates/Entry/entry.html.twig
@@ -42,7 +42,7 @@
             </ul>
         </div>
     </nav>
-    <ul id="slide-out" class="left-bar collapsible sidenav sidenav-fixed reader-mode" data-collapsible="accordion" data-controller="materialize--sidenav">
+    <ul id="slide-out" class="left-bar collapsible sidenav sidenav-fixed reader-mode" data-controller="materialize--sidenav materialize--collapsible">
         <li class="bold border-bottom hide-on-med-and-down">
             <a class="waves-effect collapsible-header" href="{{ path('homepage') }}">
                 <i class="material-icons small">arrow_back</i>