Restructure

src/Mainframe/SidebarSection.jsx

@@ -38,7 +38,7 @@ const SidebarSection = ({ showSidebar, setShowSidebar, isMobile }) => {
       icon: Diybridge,
       subItems: [
         { label: "Bridge", icon: Diybridge, link: "#bridge" },
-        { label: "Linkbutton", icon: FaLink, link: "#linkbutton" },
+        { label: "Link button", icon: FaLink, link: "#linkbutton" },
         { label: "App Users", icon: PiUserListFill, link: "#users" },
         { label: "Alarm", icon: FaExclamationTriangle, link: "#alarm" },
         { label: "Settings", icon: FaCog, link: "#settings" },

src/Pages/Bridge.jsx

@@ -153,6 +153,7 @@ const Bridge = ({ HOST_IP, API_KEY }) => {
         console.error(error);
         toast.error(`Error occurred: ${error.message}`);
       });
+    closeWizard()
   };
 
   const backupConfig = () => {
@@ -165,6 +166,7 @@ const Bridge = ({ HOST_IP, API_KEY }) => {
         console.error(error);
         toast.error(`Error occurred: ${error.message}`);
       });
+    closeWizard()
   };
 
   const downloadConfig = () => {
@@ -178,6 +180,7 @@ const Bridge = ({ HOST_IP, API_KEY }) => {
         console.error(error);
         toast.error(`Error occurred: ${error.message}`);
       });
+    closeWizard()
   };
 
   const Restart = () => {
@@ -270,6 +273,7 @@ const Bridge = ({ HOST_IP, API_KEY }) => {
         console.error(error);
         toast.error(`Error occurred: ${error.message}`);
       });
+    closeWizard()
   };
 
   const restoreAlert = () => {
@@ -299,6 +303,7 @@ const Bridge = ({ HOST_IP, API_KEY }) => {
         console.error(error);
         toast.error(`Error occurred: ${error.message}`);
       });
+    closeWizard()
   };
 
   const debugOptions = () => {
@@ -340,6 +345,7 @@ const Bridge = ({ HOST_IP, API_KEY }) => {
         console.error(error);
         toast.error(`Error occurred: ${error.message}`);
       });
+    closeWizard()
   };
 
   const downloadLog = () => {
@@ -353,6 +359,8 @@ const Bridge = ({ HOST_IP, API_KEY }) => {
         console.error(error);
         toast.error(`Error occurred: ${error.message}`);
       });
+
+    closeWizard()
   };
 
   let options = timezones.map(function (timezone) {

src/Pages/Lights.jsx

@@ -141,7 +141,7 @@ export default function Lights({ HOST_IP, API_KEY }) {
         closeWizard={closeWizard}
         headline="Add Light"
       >
-        <AddLight HOST_IP={HOST_IP} API_KEY={API_KEY}></AddLight>
+        <AddLight HOST_IP={HOST_IP} API_KEY={API_KEY} closeWizard={closeWizard}></AddLight>
       </Wizard>
     </div>
   );

src/components/AddLight/AddLight.jsx

@@ -7,7 +7,7 @@ import GenericButton from "../GenericButton/GenericButton";
 import GenericText from "../GenericText/GenericText";
 import SelectMenu from "../SelectMenu/SelectMenu";
 
-const AddLight = ({ HOST_IP, API_KEY }) => {
+const AddLight = ({ HOST_IP, API_KEY, closeWizard }) => {
   const [lightData, setLightData] = useState({
     protocol: "auto",
   });
@@ -19,8 +19,7 @@ const AddLight = ({ HOST_IP, API_KEY }) => {
     });
   };
 
-  const handleForm = (evt) => {
-    evt.preventDefault();
+  const handleForm = () => {
     const { protocol: lightproto, ip: lightip, ...rest } = lightData;
     const formattedData = {
       protocol: lightproto,
@@ -36,7 +35,7 @@ const AddLight = ({ HOST_IP, API_KEY }) => {
         console.error(error);
         toast.error(`Error occurred: ${error.message}`);
       });
-
+      closeWizard()
   };
 
   const protocols = [

src/components/MenuItem/MenuItem.jsx

@@ -1,11 +1,27 @@
-import React, { useState } from "react";
+import { 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 submenuActive = () => {
+    if (label === "DiyHue" || label === "Addons") {
+      for (let x = 0; x < items.length; x++) {
+        if (items[x]["label"] === label) {
+          const subItems = items[x].subItems
+          for (let i = 0; i < subItems.length; i++) {
+            if (subItems[i].link === currentElement) {
+              setIsOpen(true);
+            }
+          }
+        }
+      }
+    }
+  }
+
+
   const handleParentClick = (e) => {
     if (children) {
       e.stopPropagation();
@@ -26,14 +42,14 @@ const MenuItem = ({ label, icon, onClick, isActive, children, link }) => {
         {icon}
         <p>{label}</p>
         <motion.div
-          animate={{ rotate: isOpen ? 180 : 0 }}
+          animate={{ rotate: (isOpen || submenuActive()) ? 180 : 0 }}
           transition={{ duration: 0.3 }}
           className="submenuIcon"
         >
           {children && <FaAngleDown />}
         </motion.div>
       </div>
-      <div className="submenu">{isOpen && children}</div>
+      <div className="submenu">{(isOpen || submenuActive()) && children}</div>
     </li>
   );
 
@@ -67,6 +83,8 @@ const SubMenu = ({ items, currentElement, itemClicked }) => (
         onClick={() => itemClicked(item.link)}
         isActive={currentElement === item.link}
         link={item.link}
+        items={items}
+        currentElement={currentElement}
       >
         {item.subItems && (
           <SubMenu

src/components/NotificationCenter/NotificationCenter.jsx

@@ -1,11 +1,14 @@
-import { FaBell } from "react-icons/fa";
 import { useState, useEffect } from "react";
-import "./notificationCenter.scss";
-import Wizard from "../Wizard/Wizard";
-import GenericButton from "../GenericButton/GenericButton";
+
+import axios from "axios";
 import { toast } from "react-hot-toast";
 import { Tooltip } from "@mui/material";
-import axios from "axios";
+import { FaBell } from "react-icons/fa";
+
+import Wizard from "../Wizard/Wizard";
+import GenericButton from "../GenericButton/GenericButton";
+
+import "./notificationCenter.scss";
 
 
 const NotificationCenter = ({HOST_IP, API_KEY, updating, notifications }) => {
@@ -65,6 +68,7 @@ const NotificationCenter = ({HOST_IP, API_KEY, updating, notifications }) => {
           toast.error(`Error occurred: ${error.message}`);
         });
     }
+    closeWizard()
   };
 
   const getValueState = (state) => {