From c715143831afeab059eb4ea183264081e6f6cfe2 Mon Sep 17 00:00:00 2001
From: Mathis Chambon <matchambon60@gmail.com>
Date: Mon, 15 Jul 2024 13:31:17 +0200
Subject: [PATCH] feat(sidebar): plus / minus icon interactivity

---
 .../Molecules/MenuButton/MainMenuButton.twig      |  3 +++
 components/Molecules/MenuButton/menuButton.css    |  6 ++++--
 components/Organisms/Sidebar/Sidebar.twig         |  2 +-
 components/Organisms/Sidebar/sidebar.js           | 15 ++++++++++++++-
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/components/Molecules/MenuButton/MainMenuButton.twig b/components/Molecules/MenuButton/MainMenuButton.twig
index 0006177..f853672 100644
--- 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
index a87c46a..6c06ebc 100644
--- 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
index 21fca5b..4fbbdb6 100644
--- 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
index 62ebf33..c66a746 100644
--- 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);
       }
     });
   });