gatsby-theme-carbon 4.0.7 → 4.0.9

package/package.json

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

package/src/components/LeftNav/LeftNavTree.js

@@ -10,12 +10,14 @@ import * as styles from './LeftNavTree.module.scss';
 import { dfs } from '../../util/NavTree';
 
 import LeftNavResourceLinks from './ResourceLinks';
+import usePathprefix from '../../util/hooks/usePathprefix';
 
 const LeftNavTree = ({ items, theme }) => {
   const [itemNodes, setItemNodes] = useState([]);
   const [treeActiveItem, setTreeActiveItem] = useState({});
   const [activePath, setActivePath] = useState('');
   const location = useLocation();
+  const pathPrefix = usePathprefix();
 
   const themeValue = theme === 'dark' ? 'g100' : theme;
 
@@ -66,7 +68,11 @@ const LeftNavTree = ({ items, theme }) => {
   useEffect(() => {
     const stripTrailingSlash = (str) =>
       str.endsWith('/') ? str.slice(0, -1) : str;
-    setActivePath(stripTrailingSlash(location.pathname));
+
+    const base = pathPrefix
+      ? location.pathname.replace(pathPrefix, '')
+      : location.pathname;
+    setActivePath(stripTrailingSlash(base));
   }, [location.pathname]);
 
   const getItemPath = (item) =>
@@ -79,8 +85,23 @@ const LeftNavTree = ({ items, theme }) => {
     [activePath]
   );
 
+  const isTabActive = useCallback(
+    (node) => {
+      const pathname = removeHashAndQuery(activePath);
+      const isActive =
+        `${node.path?.split('/')[1]}/${node.path?.split('/')[2]}` ===
+        `${pathname.split('/')[1]}/${pathname.split('/')[2]}`;
+
+      return isActive;
+    },
+    [activePath]
+  );
+
   useEffect(() => {
-    const activeNode = dfs(itemNodes, isTreeNodeActive);
+    let activeNode = dfs(itemNodes, isTreeNodeActive);
+    if (!activeNode) {
+      activeNode = dfs(itemNodes, isTabActive);
+    }
     setTreeActiveItem(activeNode);
   }, [isTreeNodeActive, itemNodes]);