diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js
index cd8833f0d..04406ec52 100644
--- a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js
+++ b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js
@@ -23,6 +23,7 @@ const LeftNav = (props) => {
leftNavScrollTop,
setLeftNavScrollTop,
toggleNavState,
+ pathPrefix,
} = useContext(NavContext);
const [isTreeView, setIsTreeView] = useState();
@@ -97,7 +98,11 @@ const LeftNav = (props) => {
onClick={closeSwitcher}
onKeyPress={closeSwitcher}>
{isTreeView ? (
-
+
) : (
{
+const LeftNavTree = ({ items, theme, pathPrefix }) => {
const [itemNodes, setItemNodes] = useState([]);
const [treeActiveItem, setTreeActiveItem] = useState({});
const [activePath, setActivePath] = useState('');
const location = useLocation();
- const pathPrefix = usePathprefix();
const themeValue = theme === 'dark' ? 'g100' : theme;
@@ -68,12 +66,11 @@ const LeftNavTree = ({ items, theme }) => {
useEffect(() => {
const stripTrailingSlash = (str) =>
str.endsWith('/') ? str.slice(0, -1) : str;
-
const base = pathPrefix
? location.pathname.replace(pathPrefix, '')
: location.pathname;
setActivePath(stripTrailingSlash(base));
- }, [location.pathname]);
+ }, [location.pathname, pathPrefix]);
const getItemPath = (item) =>
item.path || slugify(item.title, { lower: true, strict: true });
@@ -103,7 +100,7 @@ const LeftNavTree = ({ items, theme }) => {
activeNode = dfs(itemNodes, isTabActive);
}
setTreeActiveItem(activeNode);
- }, [isTreeNodeActive, itemNodes]);
+ }, [isTreeNodeActive, itemNodes, isTabActive]);
const isTreeNodeExpanded = (node) =>
!!dfs([node], (evalNode) =>
diff --git a/packages/gatsby-theme-carbon/src/util/context/NavContext.js b/packages/gatsby-theme-carbon/src/util/context/NavContext.js
index b77a4368b..ce4a51932 100644
--- a/packages/gatsby-theme-carbon/src/util/context/NavContext.js
+++ b/packages/gatsby-theme-carbon/src/util/context/NavContext.js
@@ -1,4 +1,5 @@
import React, { useMemo, useReducer, useState } from 'react';
+import usePathprefix from '../hooks/usePathprefix';
const NavContext = React.createContext({
leftNavIsOpen: false,
@@ -19,6 +20,7 @@ const reducer = (state, action) => {
}
};
export const NavContextProvider = ({ children }) => {
+ const pathPrefix = usePathprefix();
const [
{ leftNavIsOpen, searchIsOpen, switcherIsOpen, leftNavScrollOffset },
dispatch,
@@ -47,6 +49,7 @@ export const NavContextProvider = ({ children }) => {
leftNavScrollOffset,
leftNavScrollTop,
setLeftNavScrollTop,
+ pathPrefix,
}),
[
leftNavIsOpen,
@@ -58,6 +61,7 @@ export const NavContextProvider = ({ children }) => {
leftNavScrollOffset,
leftNavScrollTop,
setLeftNavScrollTop,
+ pathPrefix,
]
);
diff --git a/yarn.lock b/yarn.lock
index 1221a9268..b652d469e 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.8"
+ gatsby-theme-carbon: "npm:^4.0.9"
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.8, gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon":
+"gatsby-theme-carbon@npm:^4.0.9, gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon":
version: 0.0.0-use.local
resolution: "gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon"
dependencies: