Extract Materialize Sidenav controller

assets/controllers/materialize/sidenav_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from '@hotwired/stimulus';
+import M from '@materializecss/materialize';
+
+const mobileMaxWidth = 993;
+
+export default class extends Controller {
+  static values = {
+    edge: { type: String, default: 'left' },
+  };
+
+  connect() {
+    this.instance = M.Sidenav.init(this.element, { edge: this.edgeValue });
+  }
+
+  close() {
+    if (window.innerWidth < mobileMaxWidth) {
+      this.instance.close();
+    }
+  }
+
+  disconnect() {
+    this.instance.destroy();
+  }
+}

assets/index.js

@@ -39,8 +39,6 @@ import './js/shortcuts/entry';
 /* Theme style */
 import './scss/index.scss';
 
-const mobileMaxWidth = 993;
-
 /* ==========================================================================
  Annotations & Remember position
  ========================================================================== */
@@ -274,11 +272,6 @@ const articleScroll = () => {
 };
 
 $(document).ready(() => {
-  // sidenav
-  document.querySelectorAll('.sidenav').forEach((element) => {
-    $(element).sidenav({ edge: element.getAttribute('data-edge') ?? 'left' });
-  });
-
   $('select').formSelect();
   $('.collapsible[data-collapsible="accordion"]').collapsible();
   $('.collapsible[data-collapsible="expandable"]').collapsible({
@@ -309,9 +302,6 @@ $(document).ready(() => {
   $('#nav-btn-add-tag').on('click', () => {
     $('.nav-panel-add-tag').toggle();
     $('.nav-panel-menu').addClass('hidden');
-    if (window.innerWidth < mobileMaxWidth) {
-      $('.sidenav').sidenav('close');
-    }
     $('#tag_label').focus();
     return false;
   });

templates/Entry/entries.html.twig

@@ -114,7 +114,7 @@
 
     <!-- Export -->
     {% if has_exports %}
-    <div id="export" class="sidenav" data-edge="right">
+    <div id="export" class="sidenav" data-controller="materialize--sidenav" data-materialize--sidenav-edge-value="right">
     {% set current_tag = null %}
     {% if tag is defined %}
         {% set current_tag = tag.slug %}
@@ -140,7 +140,7 @@
 
     <!-- Filters -->
     {% if has_filters %}
-    <div id="filters" class="sidenav" data-edge="right">
+    <div id="filters" class="sidenav" data-controller="materialize--sidenav" data-materialize--sidenav-edge-value="right">
         <form action="{{ path('all') }}">
 
             <h4 class="center">{{ 'entry.filters.title'|trans }}</h4>

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">
+    <ul id="slide-out" class="left-bar collapsible sidenav sidenav-fixed reader-mode" data-collapsible="accordion" data-controller="materialize--sidenav">
         <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>
@@ -105,7 +105,7 @@
         {% endif %}
 
         <li class="bold border-bottom">
-            <a class="waves-effect collapsible-header" id="nav-btn-add-tag">
+            <a class="waves-effect collapsible-header" id="nav-btn-add-tag" data-action="click->materialize--sidenav#close">
                 <i class="material-icons small">label_outline</i>
                 <span>{{ 'entry.view.left_menu.add_a_tag'|trans }}</span>
             </a>

templates/layout.html.twig

@@ -43,7 +43,7 @@
 
 {% block menu %}
     <nav class="cyan darken-1">
-        <ul id="slide-out" class="left-bar sidenav sidenav-fixed">
+        <ul id="slide-out" class="left-bar sidenav sidenav-fixed" data-controller="materialize--sidenav">
             {% block logo %}
                 <li class="logo border-bottom">
                     {% if is_granted('LIST_ENTRIES') %}