From 1b683dbb05e46019c1737ae8a0a731c9e97c8509 Mon Sep 17 00:00:00 2001
From: Yassine Guedidi <yassine@guedidi.com>
Date: Sat, 1 Mar 2025 00:41:57 +0100
Subject: [PATCH] Extract Materialize Dropdown controller

---
 .../materialize/dropdown_controller.js           | 16 ++++++++++++++++
 assets/index.js                                  |  7 -------
 templates/layout.html.twig                       |  2 +-
 3 files changed, 17 insertions(+), 8 deletions(-)
 create mode 100644 assets/controllers/materialize/dropdown_controller.js

diff --git a/assets/controllers/materialize/dropdown_controller.js b/assets/controllers/materialize/dropdown_controller.js
new file mode 100644
index 000000000..12a209d16
--- /dev/null
+++ b/assets/controllers/materialize/dropdown_controller.js
@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus';
+import M from '@materializecss/materialize';
+
+export default class extends Controller {
+  connect() {
+    this.instance = M.Dropdown.init(this.element, {
+      hover: false,
+      coverTrigger: false,
+      constrainWidth: false,
+    });
+  }
+
+  disconnect() {
+    this.instance.destroy();
+  }
+}
diff --git a/assets/index.js b/assets/index.js
index 7d53241c3..e4c9336b3 100755
--- a/assets/index.js
+++ b/assets/index.js
@@ -274,13 +274,6 @@ const articleScroll = () => {
 $(document).ready(() => {
   $('select').formSelect();
 
-  $('.dropdown-trigger').dropdown({ hover: false });
-  $('.dropdown-trigger[data-covertrigger="false"][data-constrainwidth="false"]').dropdown({
-    hover: false,
-    coverTrigger: false,
-    constrainWidth: false,
-  });
-
   $('.fixed-action-btn').floatingActionButton();
 
   stickyNav();
diff --git a/templates/layout.html.twig b/templates/layout.html.twig
index 172dab47a..9ff3b21ab 100644
--- a/templates/layout.html.twig
+++ b/templates/layout.html.twig
@@ -101,7 +101,7 @@
                     </li>
                     {% block nav_panel_extra_actions '' %}
                     <li class="bold">
-                        <a class="wave-effect dropdown-trigger" data-controller="materialize--tooltip" data-covertrigger="false" data-constrainwidth="false" data-target="dropdown-account" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.account'|trans }}" href="#" id="news_menu">
+                        <a class="wave-effect dropdown-trigger" data-controller="materialize--dropdown materialize--tooltip" data-target="dropdown-account" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.account'|trans }}" href="#" id="news_menu">
                             <i class="material-icons" id="news_link">account_circle</i>
                         </a>
                     </li>