fix(leftnavtree): highlight nav menu item for tabbed pages in level2 (#…

…1514)

* fix(leftnavtree): highlight nav menu item for tabbed pages in level2

* chore: lock file updated

* fix(leftnavtree): incorrect menu item being highlight on home page

---------

Co-authored-by: Sinta Augustine <sinta.augustine@ibm.com>

packages/example/src/data/nav-items.yaml

@@ -15,7 +15,9 @@
         - title: Demo page 1
           path: /demo-level-1/demo-level-2/demo-page-1
         - title: Demo page 2
-          path: /demo-level-1/demo-level-2/demo-page-2
+          path: /demo-level-1/demo-level-2/demo-page-2/tab-1
+        - title: Demo page 3
+          path: /demo-level-1/demo-level-2/demo-page-3
 - title: Gallery
   pages:
     - path: /gallery

packages/example/src/pages/demo-level-1/demo-level-2/demo-page-2/tab-1.mdx

@@ -0,0 +1,15 @@
+---
+title: Demo page 2
+tabs: ['Tab 1', 'Tab 2']
+description: Demonstration of nested levels of navigation feature.
+---
+
+<PageDescription>
+
+This is a demonstration of nested levels of navigation feature. This example
+showcases how you can effectively organize and access hierarchical content
+within your Gatsby application. For detailed instructions on setting up nested
+levels of navigation, please refer to our
+[Sidebar Navigation guide](https://gatsby.carbondesignsystem.com/guides/navigation/sidebar/).
+
+</PageDescription>

packages/example/src/pages/demo-level-1/demo-level-2/demo-page-2/tab-2.mdx

@@ -0,0 +1,15 @@
+---
+title: Demo page 2
+tabs: ['Tab 1', 'Tab 2']
+description: Demonstration of nested levels of navigation feature.
+---
+
+<PageDescription>
+
+This is a demonstration of nested levels of navigation feature. This example
+showcases how you can effectively organize and access hierarchical content
+within your Gatsby application. For detailed instructions on setting up nested
+levels of navigation, please refer to our
+[Sidebar Navigation guide](https://gatsby.carbondesignsystem.com/guides/navigation/sidebar/).
+
+</PageDescription>

packages/example/src/pages/demo-level-1/demo-level-2/demo-page-2.mdx → packages/example/src/pages/demo-level-1/demo-level-2/demo-page-3.mdx

@@ -1,5 +1,5 @@
 ---
-title: Demo page 2
+title: Demo page 3
 description: Demonstration of nested levels of navigation feature.
 ---
 

packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavTree.js

@@ -85,22 +85,25 @@ const LeftNavTree = ({ items, theme, pathPrefix }) => {
   const isTabActive = useCallback(
     (node) => {
       const pathname = removeHashAndQuery(activePath);
+      const tabRootPath = pathname.split('/').slice(0, -1).join('/');
+
       const isActive =
-        `${node.path?.split('/')[1]}/${node.path?.split('/')[2]}` ===
-        `${pathname.split('/')[1]}/${pathname.split('/')[2]}`;
+        node.path?.split('/').slice(0, -1).join('/') === tabRootPath;
 
       return isActive;
     },
     [activePath]
   );
 
   useEffect(() => {
-    let activeNode = dfs(itemNodes, isTreeNodeActive);
-    if (!activeNode) {
-      activeNode = dfs(itemNodes, isTabActive);
+    if (activePath) {
+      let activeNode = dfs(itemNodes, isTreeNodeActive);
+      if (!activeNode) {
+        activeNode = dfs(itemNodes, isTabActive);
+      }
+      setTreeActiveItem(activeNode);
     }
-    setTreeActiveItem(activeNode);
-  }, [isTreeNodeActive, itemNodes, isTabActive]);
+  }, [isTreeNodeActive, itemNodes, isTabActive, activePath]);
 
   const isTreeNodeExpanded = (node) =>
     !!dfs([node], (evalNode) =>

yarn.lock

@@ -10586,7 +10586,7 @@ __metadata:
   dependencies:
     "@carbon/icons-react": "npm:^11.43.0"
     gatsby: "npm:^5.13.6"
-    gatsby-theme-carbon: "npm:^4.0.11"
+    gatsby-theme-carbon: "npm:^4.1.0"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
   languageName: unknown
@@ -11887,7 +11887,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"gatsby-theme-carbon@npm:^4.0.11, gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon":
+"gatsby-theme-carbon@npm:^4.1.0, gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon":
   version: 0.0.0-use.local
   resolution: "gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon"
   dependencies: