From cfd8b68257337bbdeff44ae644209639e3f5ad48 Mon Sep 17 00:00:00 2001
From: YangZhang-GitHub <2533471770@qq.com>
Date: Mon, 2 Aug 2021 13:07:04 +0800
Subject: [PATCH 1/4] The function that the menu can be configured in the Web
 UI has been implemented

---
 .../navbar/NavbarTopDropDownMenus.js          | 161 ++++++++++++++----
 web/src/components/navbar/NavbarVertical.js   |  89 +++++++++-
 2 files changed, 211 insertions(+), 39 deletions(-)

diff --git a/web/src/components/navbar/NavbarTopDropDownMenus.js b/web/src/components/navbar/NavbarTopDropDownMenus.js
index 08c7246e..1d76f400 100644
--- a/web/src/components/navbar/NavbarTopDropDownMenus.js
+++ b/web/src/components/navbar/NavbarTopDropDownMenus.js
@@ -1,42 +1,65 @@
-import React, { useContext } from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import PropTypes from 'prop-types';
 import NavbarDropdown from './NavbarDropdown';
 import NavbarDropdownComponents from './NavbarDropdownComponents';
-import {
-  // authenticationRoutes,
-  // chatRoutes,
-  // componentRoutes,
-  // ECommerceRoutes,
-  // emailRoutes,
-  // homeRoutes,
-  // pageRoutes,
-  // pluginRoutes,
-  // utilityRoutes,
-  // widgetsRoutes,
-  // kanbanRoutes,
-  dashboardRoutes,
-  spaceRoutes,
-  equipmentRoutes,
-  meterRoutes,
-  tenantRoutes,
-  storeRoutes,
-  shopfloorRoutes,
-  combinedEquipmentRoutes,
-  auxiliarySystemRoutes,
-  fddRoutes,
-  monitoringRoutes,
-  advancedReportingRoutes,
-  knowledgeBaseRoutes
-} from '../../routes';
+// import {
+//   // authenticationRoutes,
+//   // chatRoutes,
+//   // componentRoutes,
+//   // ECommerceRoutes,
+//   // emailRoutes,
+//   // homeRoutes,
+//   // pageRoutes,
+//   // pluginRoutes,
+//   // utilityRoutes,
+//   // widgetsRoutes,
+//   // kanbanRoutes,
+//   dashboardRoutes,
+//   spaceRoutes,
+//   equipmentRoutes,
+//   meterRoutes,
+//   tenantRoutes,
+//   storeRoutes,
+//   shopfloorRoutes,
+//   combinedEquipmentRoutes,
+//   auxiliarySystemRoutes,
+//   fddRoutes,
+//   monitoringRoutes,
+//   advancedReportingRoutes,
+//   knowledgeBaseRoutes
+// } from '../../routes';
+import routes from '../../routes';
 import { NavItem } from 'reactstrap';
 import { NavLink } from 'react-router-dom';
-import { breakpoints, getPageName } from '../../helpers/utils';
-import { navbarBreakPoint, topNavbarBreakpoint } from '../../config';
+import {breakpoints, createCookie, getCookieValue, getPageName} from '../../helpers/utils';
+import {APIBaseURL, navbarBreakPoint, topNavbarBreakpoint} from '../../config';
 import AppContext from '../../context/Context';
 import { withTranslation } from 'react-i18next';
+import withRedirect from "../../hoc/withRedirect";
+import {toast} from "react-toastify";
 
 
-const NavbarTopDropDownMenus = ({ setNavbarCollapsed, setShowBurgerMenu, t }) => {
+const NavbarTopDropDownMenus = ({ setRedirectUrl, setRedirect, setNavbarCollapsed, setShowBurgerMenu, t }) => {
+
+  useEffect(() => {
+    let is_logged_in = getCookieValue('is_logged_in');
+    let user_name = getCookieValue('user_name');
+    let user_display_name = getCookieValue('user_display_name');
+    let user_uuid = getCookieValue('user_uuid');
+    let token = getCookieValue('token');
+    if (is_logged_in === null || !is_logged_in) {
+      setRedirectUrl(`/authentication/basic/login`);
+      setRedirect(true);
+    } else {
+      //update expires time of cookies
+      createCookie('is_logged_in', true, 1000 * 60 * 60 * 8);
+      createCookie('user_name', user_name, 1000 * 60 * 60 * 8);
+      createCookie('user_display_name', user_display_name, 1000 * 60 * 60 * 8);
+      createCookie('user_uuid', user_uuid, 1000 * 60 * 60 * 8);
+      createCookie('token', token, 1000 * 60 * 60 * 8);
+    }
+  });
+
   const { isCombo, isTopNav } = useContext(AppContext);
   // const components = [componentRoutes, pluginRoutes, utilityRoutes];
   // const pages = [pageRoutes, kanbanRoutes, widgetsRoutes, chatRoutes, emailRoutes, ECommerceRoutes];
@@ -46,8 +69,80 @@ const NavbarTopDropDownMenus = ({ setNavbarCollapsed, setShowBurgerMenu, t }) =>
     isCombo && windowWidth < breakpoints[navbarBreakPoint] && setShowBurgerMenu(false);
   };
   const isLanding = getPageName('landing');
+  const [ viewComponentArr, setViewComponentArr] = useState([routes[0]]);
+
+  useEffect(() => {
+    let isResponseOK = false;
+    fetch(APIBaseURL + '/menus/web', {
+      method: 'GET',
+      headers: {
+        "Content-type": "application/json",
+        "User-UUID": getCookieValue('user_uuid'),
+        "Token": getCookieValue('token')
+      },
+      body: null,
+
+    }).then(response => {
+      //console.log(response);
+      if (response.ok) {
+        isResponseOK = true;
+      }
+      return response.json();
+    }).then(json => {
+      //console.log(json);
+      if (isResponseOK) {
+        const selectJson = {...json}
+        let newViewComponentArr = [routes[0]];
+        for (let i = 0; i < routes.length; i++) {
+          const route = routes[i];
+          let tempComponent = {... route};
+          if(route.to in selectJson && 'children' in route) {
+            let tempChild = [];
+            for (let j = 0; j < route.children.length; j++) {
+              const child = route.children[j];
+              if(selectJson[route.to].indexOf(child.to) !== -1) {
+                tempChild.push(child);
+              }
+            }
+            tempComponent.children = tempChild;
+
+            newViewComponentArr.push(tempComponent)
+          }else if(route.to in selectJson) {
+            newViewComponentArr.push(tempComponent)
+          }
+        }
+        setViewComponentArr(newViewComponentArr);
+      } else {
+        toast.error(json.description);
+      }
+    }).catch(err => {
+      console.log(err);
+    });
+  }, []);
+
   return (
     <>
+      {viewComponentArr.length !== 0 && viewComponentArr.map(arr =>
+        {
+          if ('children' in arr) {
+            return(
+                <NavbarDropdownComponents
+                  title={t(arr.name)}
+                  items={[arr]}
+                  handleSetNavbarCollapsed={handleSetNavbarCollapsed}
+                />
+            )
+          }else {
+            return (
+              <NavItem onClick={handleSetNavbarCollapsed}>
+                <NavLink className="nav-link" to={arr.to}>
+                  {t(arr.name)}
+                </NavLink>
+              </NavItem>
+            )
+          }
+        }
+      )}
       {/*<NavbarDropdown
         title={homeRoutes.name}
         items={homeRoutes.children}
@@ -70,7 +165,7 @@ const NavbarTopDropDownMenus = ({ setNavbarCollapsed, setShowBurgerMenu, t }) =>
           Documentation
         </NavLink>
       </NavItem> */}
-      <NavItem onClick={handleSetNavbarCollapsed}>
+      {/*<NavItem onClick={handleSetNavbarCollapsed}>
         <NavLink className="nav-link" to={dashboardRoutes.to}>
           {t(dashboardRoutes.name)}
         </NavLink>
@@ -134,11 +229,11 @@ const NavbarTopDropDownMenus = ({ setNavbarCollapsed, setShowBurgerMenu, t }) =>
         <NavLink className="nav-link" to={knowledgeBaseRoutes.to}>
           {t(knowledgeBaseRoutes.name)}
         </NavLink>
-      </NavItem>
+      </NavItem>*/}
     </>
   );
 };
 
 NavbarTopDropDownMenus.propTypes = { setNavbarCollapsed: PropTypes.func.isRequired };
 
-export default withTranslation()(NavbarTopDropDownMenus);
+export default withTranslation()(withRedirect(NavbarTopDropDownMenus));
diff --git a/web/src/components/navbar/NavbarVertical.js b/web/src/components/navbar/NavbarVertical.js
index 9375c196..56d32661 100644
--- a/web/src/components/navbar/NavbarVertical.js
+++ b/web/src/components/navbar/NavbarVertical.js
@@ -1,10 +1,10 @@
 import classNames from 'classnames';
 import is from 'is_js';
 import PropTypes from 'prop-types';
-import React, { useContext, useEffect, useRef } from 'react';
-import { Button, Collapse, Nav, Navbar } from 'reactstrap';
+import React, {useContext, useEffect, useRef, useState} from 'react';
+import {Button, Collapse, Nav, Navbar, NavItem} from 'reactstrap';
 import bgNavbarImg from '../../assets/img/generic/bg-navbar.png';
-import { navbarBreakPoint, topNavbarBreakpoint } from '../../config';
+import {APIBaseURL, navbarBreakPoint, topNavbarBreakpoint} from '../../config';
 import AppContext from '../../context/Context';
 import routes from '../../routes';
 import Flex from '../common/Flex';
@@ -13,8 +13,31 @@ import NavbarTopDropDownMenus from './NavbarTopDropDownMenus';
 import NavbarVerticalMenu from './NavbarVerticalMenu';
 import ToggleButton from './ToggleButton';
 import { withTranslation } from 'react-i18next';
+import {createCookie, getCookieValue} from "../../helpers/utils";
+import {toast} from "react-toastify";
+import withRedirect from "../../hoc/withRedirect";
+
+const NavbarVertical = ({ setRedirectUrl, setRedirect, navbarStyle, t }) => {
+
+  useEffect(() => {
+    let is_logged_in = getCookieValue('is_logged_in');
+    let user_name = getCookieValue('user_name');
+    let user_display_name = getCookieValue('user_display_name');
+    let user_uuid = getCookieValue('user_uuid');
+    let token = getCookieValue('token');
+    if (is_logged_in === null || !is_logged_in) {
+      setRedirectUrl(`/authentication/basic/login`);
+      setRedirect(true);
+    } else {
+      //update expires time of cookies
+      createCookie('is_logged_in', true, 1000 * 60 * 60 * 8);
+      createCookie('user_name', user_name, 1000 * 60 * 60 * 8);
+      createCookie('user_display_name', user_display_name, 1000 * 60 * 60 * 8);
+      createCookie('user_uuid', user_uuid, 1000 * 60 * 60 * 8);
+      createCookie('token', token, 1000 * 60 * 60 * 8);
+    }
+  });
 
-const NavbarVertical = ({ navbarStyle, t }) => {
   const navBarRef = useRef(null);
 
   const {
@@ -32,6 +55,8 @@ const NavbarVertical = ({ navbarStyle, t }) => {
     HTMLClassList.add('navbar-vertical-collapsed');
   }
 
+  const [ viewComponentArr, setViewComponentArr] = useState([routes[0]]);
+
   useEffect(() => {
     if (is.windows()) {
       HTMLClassList.add('windows');
@@ -56,6 +81,58 @@ const NavbarVertical = ({ navbarStyle, t }) => {
       }, 100);
     }
   };
+
+  useEffect(() => {
+    let isResponseOK = false;
+    fetch(APIBaseURL + '/menus/web', {
+      method: 'GET',
+      headers: {
+        "Content-type": "application/json",
+        "User-UUID": getCookieValue('user_uuid'),
+        "Token": getCookieValue('token')
+      },
+      body: null,
+
+    }).then(response => {
+      //console.log(response);
+      if (response.ok) {
+        isResponseOK = true;
+      }
+      return response.json();
+    }).then(json => {
+      //console.log(json);
+      if (isResponseOK) {
+        const selectJson = {...json}
+        let newViewComponentArr = [routes[0]];
+        for (let i = 0; i < routes.length; i++) {
+          const route = routes[i];
+          let tempComponent = {... route};
+          if(route.to in selectJson && 'children' in route) {
+            let tempChild = [];
+            for (let j = 0; j < route.children.length; j++) {
+              const child = route.children[j];
+              if(selectJson[route.to].indexOf(child.to) !== -1) {
+                tempChild.push(child);
+              }
+            }
+            tempComponent.children = tempChild;
+
+            newViewComponentArr.push(tempComponent)
+
+          }else if(route.to in selectJson) {
+            newViewComponentArr.push(tempComponent)
+          }
+        }
+
+        setViewComponentArr(newViewComponentArr);
+      } else {
+        toast.error(json.description);
+      }
+    }).catch(err => {
+      console.log(err);
+    });
+  }, [ ]);
+
   return (
     <Navbar
       expand={navbarBreakPoint}
@@ -89,7 +166,7 @@ const NavbarVertical = ({ navbarStyle, t }) => {
         }
       >
         <Nav navbar vertical>
-          <NavbarVerticalMenu routes={routes} />
+          <NavbarVerticalMenu routes={viewComponentArr} />
         </Nav>
         <div className="settings px-3 px-xl-0">
           {isCombo && (
@@ -130,4 +207,4 @@ NavbarVertical.defaultProps = {
   navbarStyle: 'transparent'
 };
 
-export default withTranslation()(NavbarVertical);
+export default withTranslation()(withRedirect(NavbarVertical));

From b25e8e8b4735613543448ceb70d17cf1e6b00918 Mon Sep 17 00:00:00 2001
From: YangZhang-GitHub <2533471770@qq.com>
Date: Mon, 2 Aug 2021 14:04:47 +0800
Subject: [PATCH 2/4] The function that the menu can be configured in the Web
 UI has been implemented

---
 web/src/components/navbar/NavbarTopDropDownMenus.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/navbar/NavbarTopDropDownMenus.js b/web/src/components/navbar/NavbarTopDropDownMenus.js
index 1d76f400..98c98800 100644
--- a/web/src/components/navbar/NavbarTopDropDownMenus.js
+++ b/web/src/components/navbar/NavbarTopDropDownMenus.js
@@ -122,7 +122,7 @@ const NavbarTopDropDownMenus = ({ setRedirectUrl, setRedirect, setNavbarCollapse
 
   return (
     <>
-      {viewComponentArr.length !== 0 && viewComponentArr.map(arr =>
+      {viewComponentArr != null && viewComponentArr.map(arr =>
         {
           if ('children' in arr) {
             return(

From 0a512af51a43f4e7669fc959641aa551d9893af4 Mon Sep 17 00:00:00 2001
From: YangZhang-GitHub <2533471770@qq.com>
Date: Mon, 2 Aug 2021 14:28:02 +0800
Subject: [PATCH 3/4] The function that the menu can be configured in the Web
 UI has been implemented

---
 web/src/components/navbar/NavbarTopDropDownMenus.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/navbar/NavbarTopDropDownMenus.js b/web/src/components/navbar/NavbarTopDropDownMenus.js
index 98c98800..3ddfeb61 100644
--- a/web/src/components/navbar/NavbarTopDropDownMenus.js
+++ b/web/src/components/navbar/NavbarTopDropDownMenus.js
@@ -122,7 +122,7 @@ const NavbarTopDropDownMenus = ({ setRedirectUrl, setRedirect, setNavbarCollapse
 
   return (
     <>
-      {viewComponentArr != null && viewComponentArr.map(arr =>
+      {viewComponentArr.map(arr =>
         {
           if ('children' in arr) {
             return(

From 3e813c666b57986ef4461b813653a566297f5182 Mon Sep 17 00:00:00 2001
From: "13621160019@163.com" <13621160019@163.com>
Date: Mon, 2 Aug 2021 16:36:18 +0800
Subject: [PATCH 4/4] updated customized menus in Web UI

---
 .../navbar/NavbarTopDropDownMenus.js          | 121 +++---------------
 web/src/components/navbar/NavbarVertical.js   |  28 ++--
 2 files changed, 34 insertions(+), 115 deletions(-)

diff --git a/web/src/components/navbar/NavbarTopDropDownMenus.js b/web/src/components/navbar/NavbarTopDropDownMenus.js
index 3ddfeb61..2aed4631 100644
--- a/web/src/components/navbar/NavbarTopDropDownMenus.js
+++ b/web/src/components/navbar/NavbarTopDropDownMenus.js
@@ -14,19 +14,6 @@ import NavbarDropdownComponents from './NavbarDropdownComponents';
 //   // utilityRoutes,
 //   // widgetsRoutes,
 //   // kanbanRoutes,
-//   dashboardRoutes,
-//   spaceRoutes,
-//   equipmentRoutes,
-//   meterRoutes,
-//   tenantRoutes,
-//   storeRoutes,
-//   shopfloorRoutes,
-//   combinedEquipmentRoutes,
-//   auxiliarySystemRoutes,
-//   fddRoutes,
-//   monitoringRoutes,
-//   advancedReportingRoutes,
-//   knowledgeBaseRoutes
 // } from '../../routes';
 import routes from '../../routes';
 import { NavItem } from 'reactstrap';
@@ -69,7 +56,7 @@ const NavbarTopDropDownMenus = ({ setRedirectUrl, setRedirect, setNavbarCollapse
     isCombo && windowWidth < breakpoints[navbarBreakPoint] && setShowBurgerMenu(false);
   };
   const isLanding = getPageName('landing');
-  const [ viewComponentArr, setViewComponentArr] = useState([routes[0]]);
+  const [ showRoutes, setShowRoutes] = useState([routes[0]]);
 
   useEffect(() => {
     let isResponseOK = false;
@@ -91,27 +78,25 @@ const NavbarTopDropDownMenus = ({ setRedirectUrl, setRedirect, setNavbarCollapse
     }).then(json => {
       //console.log(json);
       if (isResponseOK) {
-        const selectJson = {...json}
-        let newViewComponentArr = [routes[0]];
+        let showRoutes = [routes[0]];
         for (let i = 0; i < routes.length; i++) {
-          const route = routes[i];
-          let tempComponent = {... route};
-          if(route.to in selectJson && 'children' in route) {
-            let tempChild = [];
+          let route = routes[i];
+          if(route.to in json && 'children' in route) {
+            let showChildren = [];
             for (let j = 0; j < route.children.length; j++) {
               const child = route.children[j];
-              if(selectJson[route.to].indexOf(child.to) !== -1) {
-                tempChild.push(child);
+              if(json[route.to].indexOf(child.to) !== -1) {
+                showChildren.push(child);
               }
             }
-            tempComponent.children = tempChild;
+            route.children = showChildren;
 
-            newViewComponentArr.push(tempComponent)
-          }else if(route.to in selectJson) {
-            newViewComponentArr.push(tempComponent)
+            showRoutes.push(route)
+          }else if(route.to in json) {
+            showRoutes.push(route)
           }
         }
-        setViewComponentArr(newViewComponentArr);
+        setShowRoutes(showRoutes);
       } else {
         toast.error(json.description);
       }
@@ -122,21 +107,22 @@ const NavbarTopDropDownMenus = ({ setRedirectUrl, setRedirect, setNavbarCollapse
 
   return (
     <>
-      {viewComponentArr.map(arr =>
+      {showRoutes.map(route =>
         {
-          if ('children' in arr) {
+          if ('children' in route) {
             return(
                 <NavbarDropdownComponents
-                  title={t(arr.name)}
-                  items={[arr]}
+                  key={route.name}
+                  title={t(route.name)}
+                  items={[route]}
                   handleSetNavbarCollapsed={handleSetNavbarCollapsed}
                 />
             )
-          }else {
+          } else {
             return (
-              <NavItem onClick={handleSetNavbarCollapsed}>
-                <NavLink className="nav-link" to={arr.to}>
-                  {t(arr.name)}
+              <NavItem onClick={handleSetNavbarCollapsed} key={route.name}>
+                <NavLink className="nav-link" to={route.to}>
+                  {t(route.name)}
                 </NavLink>
               </NavItem>
             )
@@ -165,71 +151,6 @@ const NavbarTopDropDownMenus = ({ setRedirectUrl, setRedirect, setNavbarCollapse
           Documentation
         </NavLink>
       </NavItem> */}
-      {/*<NavItem onClick={handleSetNavbarCollapsed}>
-        <NavLink className="nav-link" to={dashboardRoutes.to}>
-          {t(dashboardRoutes.name)}
-        </NavLink>
-      </NavItem>
-      <NavbarDropdownComponents
-        title={t(spaceRoutes.name)}
-        items={[spaceRoutes]}
-        handleSetNavbarCollapsed={handleSetNavbarCollapsed}
-      />
-      <NavbarDropdownComponents
-        title={t(equipmentRoutes.name)}
-        items={[equipmentRoutes]}
-        handleSetNavbarCollapsed={handleSetNavbarCollapsed}
-      />
-      <NavbarDropdownComponents
-        title={t(meterRoutes.name)}
-        items={[meterRoutes]}
-        handleSetNavbarCollapsed={handleSetNavbarCollapsed}
-      />
-      <NavbarDropdownComponents
-        title={t(tenantRoutes.name)}
-        items={[tenantRoutes]}
-        handleSetNavbarCollapsed={handleSetNavbarCollapsed}
-      />
-      <NavbarDropdownComponents
-        title={t(storeRoutes.name)}
-        items={[storeRoutes]}
-        handleSetNavbarCollapsed={handleSetNavbarCollapsed}
-      />
-      <NavbarDropdownComponents
-        title={t(shopfloorRoutes.name)}
-        items={[shopfloorRoutes]}
-        handleSetNavbarCollapsed={handleSetNavbarCollapsed}
-      />
-      <NavbarDropdownComponents
-        title={t(combinedEquipmentRoutes.name)}
-        items={[combinedEquipmentRoutes]}
-        handleSetNavbarCollapsed={handleSetNavbarCollapsed}
-      />
-      <NavbarDropdownComponents
-        title={t(auxiliarySystemRoutes.name)}
-        items={[auxiliarySystemRoutes]}
-        handleSetNavbarCollapsed={handleSetNavbarCollapsed}
-      />
-      <NavbarDropdownComponents
-        title={t(fddRoutes.name)}
-        items={[fddRoutes]}
-        handleSetNavbarCollapsed={handleSetNavbarCollapsed}
-      />
-      <NavbarDropdownComponents
-        title={t(monitoringRoutes.name)}
-        items={[monitoringRoutes]}
-        handleSetNavbarCollapsed={handleSetNavbarCollapsed}
-      />
-      <NavItem onClick={handleSetNavbarCollapsed}>
-        <NavLink className="nav-link" to={advancedReportingRoutes.to}>
-          {t(advancedReportingRoutes.name)}
-        </NavLink>
-      </NavItem>
-      <NavItem onClick={handleSetNavbarCollapsed}>
-        <NavLink className="nav-link" to={knowledgeBaseRoutes.to}>
-          {t(knowledgeBaseRoutes.name)}
-        </NavLink>
-      </NavItem>*/}
     </>
   );
 };
diff --git a/web/src/components/navbar/NavbarVertical.js b/web/src/components/navbar/NavbarVertical.js
index 56d32661..9a8c8093 100644
--- a/web/src/components/navbar/NavbarVertical.js
+++ b/web/src/components/navbar/NavbarVertical.js
@@ -55,7 +55,7 @@ const NavbarVertical = ({ setRedirectUrl, setRedirect, navbarStyle, t }) => {
     HTMLClassList.add('navbar-vertical-collapsed');
   }
 
-  const [ viewComponentArr, setViewComponentArr] = useState([routes[0]]);
+  const [ showRoutes, setShowRoutes] = useState([routes[0]]);
 
   useEffect(() => {
     if (is.windows()) {
@@ -102,29 +102,27 @@ const NavbarVertical = ({ setRedirectUrl, setRedirect, navbarStyle, t }) => {
     }).then(json => {
       //console.log(json);
       if (isResponseOK) {
-        const selectJson = {...json}
-        let newViewComponentArr = [routes[0]];
+        let showRoutes = [routes[0]];
         for (let i = 0; i < routes.length; i++) {
-          const route = routes[i];
-          let tempComponent = {... route};
-          if(route.to in selectJson && 'children' in route) {
-            let tempChild = [];
+          let route = routes[i];
+          if(route.to in json && 'children' in route) {
+            let showChildren = [];
             for (let j = 0; j < route.children.length; j++) {
               const child = route.children[j];
-              if(selectJson[route.to].indexOf(child.to) !== -1) {
-                tempChild.push(child);
+              if(json[route.to].indexOf(child.to) !== -1) {
+                showChildren.push(child);
               }
             }
-            tempComponent.children = tempChild;
+            route.children = showChildren;
 
-            newViewComponentArr.push(tempComponent)
+            showRoutes.push(route)
 
-          }else if(route.to in selectJson) {
-            newViewComponentArr.push(tempComponent)
+          }else if(route.to in json) {
+            showRoutes.push(route)
           }
         }
 
-        setViewComponentArr(newViewComponentArr);
+        setShowRoutes(showRoutes);
       } else {
         toast.error(json.description);
       }
@@ -166,7 +164,7 @@ const NavbarVertical = ({ setRedirectUrl, setRedirect, navbarStyle, t }) => {
         }
       >
         <Nav navbar vertical>
-          <NavbarVerticalMenu routes={viewComponentArr} />
+          <NavbarVerticalMenu routes={showRoutes} />
         </Nav>
         <div className="settings px-3 px-xl-0">
           {isCombo && (