menu style burger pour la liste de navigation (#7)

* menu style burger pour la liste de navigation * modif code js
code-rhapsodie · Nov 21, 2023 · 28e0a00 · 28e0a00
1 parent c9c762b
commit 28e0a00
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 14 deletions.
diff --git a/bundle/Resources/public/admin/js/ibexamailing.js b/bundle/Resources/public/admin/js/ibexamailing.js
@@ -40,4 +40,31 @@ jQuery(function () {
             li.classList.toggle('c-list-item--is-expanded');
         });
     });
+
+    document.querySelectorAll(".toggle-button-menu").forEach((div) => {
+        div.addEventListener('click', () => {
+            const scrollableWrapper = div.closest('.toggle-wrapper').querySelector('.m-tree__scrollable-wrapper');
+            const treeContainer = div.closest('.m-tree');
+
+            if (!scrollableWrapper || !treeContainer) {
+                return; // Arrêter l'exécution si les éléments nécessaires ne sont pas présents
+            }
+
+            scrollableWrapper.classList.toggle('d-none');
+
+            // Appliquer le style à la div toggle-button-menu si d-none est active
+            if (scrollableWrapper.classList.contains('d-none')) {
+                div.style.width = 'fit-content';
+                treeContainer.style.width = '70px';
+                return; // Sortir de la fonction si d-none est active
+            }
+
+            // Réinitialiser la largeur si d-none n'est pas active
+            div.style.width = '320px';
+            treeContainer.style.width = '';
+        });
+    });
+
+
+
 });
diff --git a/bundle/Resources/views/admin/layout/pagelayout.html.twig b/bundle/Resources/views/admin/layout/pagelayout.html.twig
@@ -10,21 +10,27 @@
     <div class="ibexa-content-view ibexa-content-tree-container">
         <div class="ibexa-content-tree-container__root">
             <div class="m-tree" style="width: 320px; position: relative;">
-                <div class="c-header">
-                    <div class="c-header__name">
-                        Ibexa Mailing
+                <div class="toggle-wrapper">
+
+                    <div class="c-header toggle-button-menu">
+                        <div class="c-header__name">
+                            <svg id="toggleSvg" class="ibexa-icon ibexa-icon--small">
+                                <use xlink:href="/bundles/ibexaadminui/img/ibexa-icons.svg#content-tree"></use>
+                            </svg>
+                            Ibexa Mailing
+                        </div>
                     </div>
-                </div>
-                <div class="m-tree__scrollable-wrapper">
-                    <ul class="c-list">
-                        <li class="c-list-item c-list-item--has-sub-items c-list-item--is-expanded c-list-item--is-selected c-list-item--is-root-item">
-                            <h2 class="c-list-item__row">
-                                <svg class="ibexa-icon ibexa-icon--small">
-                                    <use xlink:href="/bundles/ibexaadminui/img/ibexa-icons.svg#content-tree"></use>
-                                </svg>&nbsp;{{ "layout.pagelayout.campaigns"|trans }}</h2>
-                            {{ knp_menu_render('ibexamailing.menu.campaigns', {template:"@IbexaMailing/admin/common/menu.html.twig"}) }}
-                        </li>
-                    </ul >
+
+                    <div class="m-tree__scrollable-wrapper">
+                        <ul class="c-list">
+                            <li class="c-list-item c-list-item--has-sub-items c-list-item--is-expanded c-list-item--is-selected c-list-item--is-root-item">
+                                <h2 class="c-list-item__row">
+                                    &nbsp;{{ "layout.pagelayout.campaigns"|trans }}</h2>
+                                {{ knp_menu_render('ibexamailing.menu.campaigns', {template:"@IbexaMailing/admin/common/menu.html.twig"}) }}
+                            </li>
+                        </ul >
+                    </div>
+
                 </div>
                 <div class="m-tree__resize-handler"></div>
             </div>