Update MenuItem.jsx

diyhue · Jun 10, 2024 · 6eadc49 · 6eadc49
1 parent 1f9556e
commit 6eadc49
Showing 1 changed file with 28 additions and 3 deletions.
diff --git a/src/components/MenuItem/MenuItem.jsx b/src/components/MenuItem/MenuItem.jsx
@@ -3,9 +3,32 @@ import React, { useState } from "react";
 import { motion } from "framer-motion";
 import { FaAngleDown } from "react-icons/fa";
 
-const MenuItem = ({ label, icon, onClick, isActive, children, link }) => {
+const MenuItem = ({ label, icon, onClick, isActive, children, link, items, currentElement }) => {
   const [isOpen, setIsOpen] = useState(false);
 
+  const itemActiv = () => {
+    if (label === "DiyHue" || label === "Addons") {
+      //console.log("label: " + label);
+      for (let x = 0; x < items.length; x++) {
+        if (items[x]["label"] === label) {
+          //console.log("items[x]label: " + items[x]["label"]);
+          const subItems = items[x].subItems
+          //console.log("subItems.length: " + subItems.length);
+          for (let i = 0; i < subItems.length; i++) {
+            //console.table("subItems: " + subItems[i].label);
+            if (subItems[i].link === currentElement) {
+              //console.log("subItems[i].link: " + subItems[i].link);
+              return true;
+            }else{
+              return false
+            }
+          }
+        }
+      }
+    }
+  }
+
+
   const handleParentClick = (e) => {
     if (children) {
       e.stopPropagation();
@@ -26,14 +49,14 @@ const MenuItem = ({ label, icon, onClick, isActive, children, link }) => {
         {icon}
         <p>{label}</p>
         <motion.div
-          animate={{ rotate: isOpen ? 180 : 0 }}
+          animate={{ rotate: (isOpen || itemActiv()) ? 180 : 0 }}
           transition={{ duration: 0.3 }}
           className="submenuIcon"
         >
           {children && <FaAngleDown />}
         </motion.div>
       </div>
-      <div className="submenu">{isOpen && children}</div>
+      <div className="submenu">{(isOpen || itemActiv()) && children}</div>
     </li>
   );
 
@@ -67,6 +90,8 @@ const SubMenu = ({ items, currentElement, itemClicked }) => (
         onClick={() => itemClicked(item.link)}
         isActive={currentElement === item.link}
         link={item.link}
+        items={items}
+        currentElement={currentElement}
       >
         {item.subItems && (
           <SubMenu