gatsby-theme-carbon 4.0.8 → 4.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-carbon",
-  "version": "4.0.8",
+  "version": "4.0.10",
   "main": "index.js",
   "author": "vpicone <vp@vincepic.one> (@vpicone)",
   "repository": {

package/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 ? (
-        <LeftNavTree items={navItems} theme={props.theme} />
+        <LeftNavTree
+          items={navItems}
+          theme={props.theme}
+          pathPrefix={pathPrefix}
+        />
       ) : (
         <SideNav
           ref={sideNavRef}

package/src/components/LeftNav/LeftNavTree.js

@@ -11,7 +11,7 @@ import { dfs } from '../../util/NavTree';
 
 import LeftNavResourceLinks from './ResourceLinks';
 
-const LeftNavTree = ({ items, theme }) => {
+const LeftNavTree = ({ items, theme, pathPrefix }) => {
   const [itemNodes, setItemNodes] = useState([]);
   const [treeActiveItem, setTreeActiveItem] = useState({});
   const [activePath, setActivePath] = useState('');
@@ -66,8 +66,11 @@ const LeftNavTree = ({ items, theme }) => {
   useEffect(() => {
     const stripTrailingSlash = (str) =>
       str.endsWith('/') ? str.slice(0, -1) : str;
-    setActivePath(stripTrailingSlash(location.pathname));
-  }, [location.pathname]);
+    const base = pathPrefix
+      ? location.pathname.replace(pathPrefix, '')
+      : location.pathname;
+    setActivePath(stripTrailingSlash(base));
+  }, [location.pathname, pathPrefix]);
 
   const getItemPath = (item) =>
     item.path || slugify(item.title, { lower: true, strict: true });
@@ -97,7 +100,7 @@ const LeftNavTree = ({ items, theme }) => {
       activeNode = dfs(itemNodes, isTabActive);
     }
     setTreeActiveItem(activeNode);
-  }, [isTreeNodeActive, itemNodes]);
+  }, [isTreeNodeActive, itemNodes, isTabActive]);
 
   const isTreeNodeExpanded = (node) =>
     !!dfs([node], (evalNode) =>

package/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,
     ]
   );