feat(sidebar): plus / minus icon interactivity

thelia · Jul 15, 2024 · c715143 · c715143
1 parent cca748c
commit c715143
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/components/Molecules/MenuButton/MainMenuButton.twig b/components/Molecules/MenuButton/MainMenuButton.twig
@@ -18,5 +18,8 @@
 		<div class="MainMenuButton-plus">
 			{{ source("/icons/plus.svg") }}
 		</div>
+		<div class="hidden MainMenuButton-minus">
+			{{ source("/icons/minus.svg") }}
+		</div>
 	{% endif %}
 </a>
diff --git a/components/Molecules/MenuButton/menuButton.css b/components/Molecules/MenuButton/menuButton.css
@@ -11,12 +11,14 @@
     margin-right: rem-convert(8px);
   }
 
-  &-plus {
+  &-plus,
+  &-minus {
     margin-left: auto;
   }
 
   &-icon,
-  &-plus {
+  &-plus,
+  &-minus {
     width: rem-convert(22px);
     height: rem-convert(22px);
   }

diff --git a/components/Organisms/Sidebar/Sidebar.twig b/components/Organisms/Sidebar/Sidebar.twig
@@ -4,7 +4,7 @@
 			{% include '../../Molecules/MenuButton/MainMenuButton.twig' with { label: ' Dashboard', icon: "dashboard", href: "#" } %}
 		</li>
 		<li class='Sidebar-menu-item'>
-			{% include '../../Molecules/MenuButton/MainMenuButton.twig' with { label: 'Commandes', icon: "orders", hasSubMenus: true, href: "#" } %}
+			{% include '../../Molecules/MenuButton/MainMenuButton.twig' with { label: 'Commandes', icon: "orders", hasSubMenus: true, isOpen: false, href: "#" } %}
 			<ul class="Sidebar-menu-item-submenu">
 				{% include '../../Molecules/MenuButton/SubMenuButton.twig' with { label: 'Toutes mes commandes', count: 24, labelClasses: "bg-white text-black" } %}
 				{% include '../../Molecules/MenuButton/SubMenuButton.twig' with { label: 'Non payée', count: 2, labelClasses: "bg-warning text-black" } %}

diff --git a/components/Organisms/Sidebar/sidebar.js b/components/Organisms/Sidebar/sidebar.js
@@ -14,8 +14,13 @@ export const sidebar = () => {
           b.classList.remove('MainMenuButton--selected');
           if (b.classList.contains('MainMenuButton--hasSubMenus')) {
             const bSubMenus = b.nextElementSibling;
-            if (bSubMenus)
+            if (bSubMenus) {
               bSubMenus.classList.remove('Sidebar-menu-item-submenu--open');
+              b.querySelector('.MainMenuButton-minus').classList.add('hidden');
+              b.querySelector('.MainMenuButton-plus').classList.remove(
+                'hidden'
+              );
+            }
           }
         }
       });
@@ -27,6 +32,14 @@ export const sidebar = () => {
           'Sidebar-menu-item-submenu--open',
           !isSelected
         );
+
+        button
+          .querySelector('.MainMenuButton-plus')
+          .classList.toggle('hidden', !isSelected);
+
+        button
+          .querySelector('.MainMenuButton-minus')
+          .classList.toggle('hidden', isSelected);
       }
     });
   });