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: