From bbbf15736e358fa9d066f71d48ca3386bb00db48 Mon Sep 17 00:00:00 2001
From: Fisico <fisico994@gmail.com>
Date: Fri, 8 Mar 2024 23:00:47 +0100
Subject: [PATCH] fix submenu collapse

---
 src/containers/MenuItem.js   | 31 ++++++++++++++++++-------------
 src/containers/TheSidebar.js | 10 +---------
 2 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/containers/MenuItem.js b/src/containers/MenuItem.js
index 5f5f038..5fd9e2a 100644
--- a/src/containers/MenuItem.js
+++ b/src/containers/MenuItem.js
@@ -1,28 +1,33 @@
 import React, { useState } from 'react';
 
-
 const MenuItem = ({ label, icon, onClick, isActive, children, link }) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const handleClick = () => {
+  const handleParentClick = (e) => {
     if (children) {
+      e.stopPropagation();
       setIsOpen(!isOpen);
-    } else {
+    }
+  };
+
+  const handleChildClick = (e) => {
+    if (!children) {
+      e.stopPropagation();
       onClick();
     }
   };
 
   return (
-    <a href={link}>
-        <li className={isActive ? 'active' : ''} onClick={handleClick}>
-            <div className='menuEntry'>
-                {icon}
-                <p>{label}</p>
-            </div>
-            <div className='submenu'>
-                {isOpen && children}
-            </div>
-         </li>
+    <a href={link} onClick={handleChildClick}>
+      <li className={isActive ? 'active' : ''} onClick={handleParentClick}>
+        <div className='menuEntry'>
+          {icon}
+          <p>{label}</p>
+        </div>
+        <div className='submenu'>
+          {isOpen && children}
+        </div>
+      </li>
     </a>
   );
 };
diff --git a/src/containers/TheSidebar.js b/src/containers/TheSidebar.js
index 19840dd..0a91fa0 100644
--- a/src/containers/TheSidebar.js
+++ b/src/containers/TheSidebar.js
@@ -24,8 +24,6 @@ import "../scss/sidebar.scss";
 const TheSidebar = ({ showSidebar, setShowSidebar, isMobile }) => {
 
   const [currentElement, setCurrentElement] = useState(window.location.hash.substring(2));
-  const [openSubmenu, setOpenSubmenu] = useState(null);
-
 
   const itemClicked = (link) => {
     if (isMobile) {
@@ -34,13 +32,7 @@ const TheSidebar = ({ showSidebar, setShowSidebar, isMobile }) => {
     setCurrentElement(link);
   }
 
-  const toggleSubmenu = (submenu) => {
-    if (openSubmenu === submenu) {
-      setOpenSubmenu(null);
-    } else {
-      setOpenSubmenu(submenu);
-    }
-  }
+  
   
   const menuItems = [
     { label: 'Groups', icon: <FaUser style={{ color: "#D85BCD" }} />, link: '#' },