fix: prevent nav from collapsing during local development (#1510)

* fix: use env var, rerendering of value returned from usePathprefix causes nav to collapse

* chore: cleanup

* docs: add note about PATH_PREFIX

* chore: format

* refactor: set prefix in context and pass as prop

* chore: remove doc updates given new approach

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

packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavTree.js

@@ -10,14 +10,12 @@ 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 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) =>

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

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: