fix submenu collapse

diyhue · Mar 8, 2024 · bbbf157 · bbbf157
1 parent 23cfc42
commit bbbf157
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 22 deletions.
diff --git 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
@@ -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: '#' },