From 3fa25fbfd5192e3c236cf6600c3dda12d6afdee8 Mon Sep 17 00:00:00 2001
From: Sinta Augustine <sinta.augustine@ibm.com>
Date: Tue, 3 Sep 2024 16:27:45 +0530
Subject: [PATCH] fix(leftnavtree): hightlight nav item for tabbed pages

---
 .../src/components/LeftNav/LeftNavTree.js       | 17 ++++++++++++++++-
 yarn.lock                                       |  4 ++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavTree.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavTree.js
index e9b5351e2..bf42be968 100644
--- a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavTree.js
+++ b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavTree.js
@@ -79,8 +79,23 @@ const LeftNavTree = ({ items, theme }) => {
     [activePath]
   );
 
+  const isTabActive = useCallback(
+    (node) => {
+      const pathname = removeHashAndQuery(activePath);
+      const isActive =
+        `${node.path?.split('/')[1]}/${node.path?.split('/')[2]}` ===
+        `${pathname.split('/')[1]}/${pathname.split('/')[2]}`;
+
+      return isActive;
+    },
+    [activePath]
+  );
+
   useEffect(() => {
-    const activeNode = dfs(itemNodes, isTreeNodeActive);
+    let activeNode = dfs(itemNodes, isTreeNodeActive);
+    if (!activeNode) {
+      activeNode = dfs(itemNodes, isTabActive);
+    }
     setTreeActiveItem(activeNode);
   }, [isTreeNodeActive, itemNodes]);
 
diff --git a/yarn.lock b/yarn.lock
index a5d6e9dda..b55ef999e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10595,7 +10595,7 @@ __metadata:
   dependencies:
     "@carbon/icons-react": "npm:^11.43.0"
     gatsby: "npm:^5.13.6"
-    gatsby-theme-carbon: "npm:^4.0.6"
+    gatsby-theme-carbon: "npm:^4.0.7"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
   languageName: unknown
@@ -11905,7 +11905,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"gatsby-theme-carbon@npm:^4.0.6, gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon":
+"gatsby-theme-carbon@npm:^4.0.7, gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon":
   version: 0.0.0-use.local
   resolution: "gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon"
   dependencies: