Fixed sidebar open issue in first page load

AOT-Technologies · Nov 26, 2024 · a1a8095 · a1a8095
1 parent 513092a
commit a1a8095
Showing 1 changed file with 22 additions and 4 deletions.
diff --git a/forms-flow-nav/src/sidenav/Sidebar.jsx b/forms-flow-nav/src/sidenav/Sidebar.jsx
@@ -2,7 +2,7 @@ import "./Sidebar.scss";
 import Accordion from "react-bootstrap/Accordion";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Navbar, Container, Nav, NavDropdown } from "react-bootstrap";
-import { Link, BrowserRouter, useHistory } from "react-router-dom";
+import { Link, BrowserRouter, useHistory ,useLocation } from "react-router-dom";
 import { getUserRoleName, getUserRolePermission } from "../helper/user";
 import createURLPathMatchExp from "../helper/regExp/pathMatch";
 import { useTranslation } from "react-i18next";
@@ -49,6 +49,7 @@ const Sidebar = React.memo(({ props }) => {
   const tenantKey = tenant?.tenantId;
   const formTenant = form?.tenantKey;
   const { t } = useTranslation();
+  const currentLocation = useLocation();
 
   // const [activeLink, setActiveLink] = useState("");
   const baseUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/";
@@ -76,6 +77,7 @@ const Sidebar = React.memo(({ props }) => {
   const { pathname } = location;
   const isAuthenticated = instance?.isAuthenticated();
   const showApplications = setShowApplications(userDetail?.groups);
+  const [activeKey,setActiveKey] = useState(0);
 
   const getInitials = (name) => {
     if (!name) return "";
@@ -145,7 +147,23 @@ const Sidebar = React.memo(({ props }) => {
       setTenantLogo(logo);
     }
   }, [tenant]);
-
+
+  useEffect((()=>{
+    const sections = [
+      { key: "0", matchExps: ["formflow", "bundle", "subflow", "decision-table"] },
+      { key: "1", matchExps: ["form", "application", "draft"] },
+      { key: "2", matchExps: ["task"] },
+      { key: "3", matchExps: ["metrics", "insights"] },
+      { key: "4", matchExps: ["admin/dashboard", "admin/roles", "admin/users"] },
+    ];
+    const activeSection =
+    sections.find((section) =>
+      section.matchExps.some((exp) => currentLocation.pathname.includes(exp))
+    ) || { key: "0" }; // Default to key "0" if no match
+
+    setActiveKey(activeSection.key);
+  }),[currentLocation.pathname]);
+
   useEffect(() => {
     if (!isAuthenticated && formTenant && MULTITENANCY_ENABLED) {
       setLoginUrl(`/tenant/${formTenant}/`);
@@ -193,7 +211,7 @@ const Sidebar = React.memo(({ props }) => {
           <ApplicationLogo data-testid="application-logo" />
         </div>
         <div className="options-container" data-testid="options-container">
-          <Accordion defaultActiveKey="">
+          <Accordion activeKey={activeKey} onSelect={(key) => setActiveKey(key)}>
             {ENABLE_FORMS_MODULE &&
               (isCreateDesigns || isViewDesigns) && (
                 <MenuComponent
@@ -237,7 +255,7 @@ const Sidebar = React.memo(({ props }) => {
                       : []),
                     ...(isCreateDesigns && ENABLE_PROCESSES_MODULE) ? [
                       {
-                        name: "Sub - flows",
+                        name: "Subflows",
                         path: "subflow",
                         matchExps: [createURLPathMatchExp("subflow", baseUrl)],
                       },