From 0d5f9d58cc4dace2e7942d5beb00c3e39cad9823 Mon Sep 17 00:00:00 2001 From: Sinta Augustine Date: Fri, 13 Sep 2024 18:49:39 +0530 Subject: [PATCH] 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 --- packages/example/src/data/nav-items.yaml | 4 +++- .../demo-level-2/demo-page-2/tab-1.mdx | 15 +++++++++++++++ .../demo-level-2/demo-page-2/tab-2.mdx | 15 +++++++++++++++ .../{demo-page-2.mdx => demo-page-3.mdx} | 2 +- .../src/components/LeftNav/LeftNavTree.js | 17 ++++++++++------- yarn.lock | 4 ++-- 6 files changed, 46 insertions(+), 11 deletions(-) create mode 100644 packages/example/src/pages/demo-level-1/demo-level-2/demo-page-2/tab-1.mdx create mode 100644 packages/example/src/pages/demo-level-1/demo-level-2/demo-page-2/tab-2.mdx rename packages/example/src/pages/demo-level-1/demo-level-2/{demo-page-2.mdx => demo-page-3.mdx} (96%) diff --git a/packages/example/src/data/nav-items.yaml b/packages/example/src/data/nav-items.yaml index 5539af4a6..1989c6517 100644 --- a/packages/example/src/data/nav-items.yaml +++ b/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 diff --git a/packages/example/src/pages/demo-level-1/demo-level-2/demo-page-2/tab-1.mdx b/packages/example/src/pages/demo-level-1/demo-level-2/demo-page-2/tab-1.mdx new file mode 100644 index 000000000..4fbae2a44 --- /dev/null +++ b/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. +--- + + + +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/). + + diff --git a/packages/example/src/pages/demo-level-1/demo-level-2/demo-page-2/tab-2.mdx b/packages/example/src/pages/demo-level-1/demo-level-2/demo-page-2/tab-2.mdx new file mode 100644 index 000000000..4fbae2a44 --- /dev/null +++ b/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. +--- + + + +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/). + + diff --git a/packages/example/src/pages/demo-level-1/demo-level-2/demo-page-2.mdx b/packages/example/src/pages/demo-level-1/demo-level-2/demo-page-3.mdx similarity index 96% rename from packages/example/src/pages/demo-level-1/demo-level-2/demo-page-2.mdx rename to packages/example/src/pages/demo-level-1/demo-level-2/demo-page-3.mdx index c2864a86f..a5a697841 100644 --- a/packages/example/src/pages/demo-level-1/demo-level-2/demo-page-2.mdx +++ b/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. --- diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavTree.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavTree.js index 8f78c6fa4..ba43b6ab4 100644 --- a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavTree.js +++ b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavTree.js @@ -85,9 +85,10 @@ 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; }, @@ -95,12 +96,14 @@ const LeftNavTree = ({ items, theme, pathPrefix }) => { ); 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) => diff --git a/yarn.lock b/yarn.lock index cf36bdb96..5bf386a9e 100644 --- a/yarn.lock +++ b/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: