feat: refactor navigation item selection logic and integrate into DocTemplate

Author: shhdgit

src/components/Layout/Header/HeaderNav.tsx

@@ -20,30 +20,7 @@ import {
 } from "./HeaderNavConfigType";
 import { generateNavConfig } from "./HeaderNavConfigData";
 import { clearAllNavStates } from "../LeftNav/LeftNavTree";
-
-// Helper function to find selected item recursively
-const findSelectedItem = (
-  configs: NavConfig[],
-  namespace?: TOCNamespace
-): NavItemConfig | null => {
-  for (const config of configs) {
-    if (config.type === "item") {
-      const isSelected =
-        typeof config.selected === "function"
-          ? config.selected(namespace)
-          : config.selected ?? false;
-      if (isSelected) {
-        return config;
-      }
-    } else if (config.type === "group" && config.children) {
-      const item = findSelectedItem(config.children, namespace);
-      if (item) {
-        return item;
-      }
-    }
-  }
-  return null;
-};
+import { getSelectedNavItem } from "./getSelectedNavItem";
 
 export default function HeaderNavStack(props: {
   buildType?: BuildType;
@@ -66,7 +43,7 @@ export default function HeaderNavStack(props: {
   // Find and notify selected item
   React.useEffect(() => {
     if (props.onSelectedNavItemChange) {
-      const selectedNavItem = findSelectedItem(defaultConfig, props.namespace);
+      const selectedNavItem = getSelectedNavItem(defaultConfig, props.namespace);
       props.onSelectedNavItemChange(selectedNavItem);
     }
   }, [defaultConfig, props.namespace, props.onSelectedNavItemChange]);

src/components/Layout/Header/getSelectedNavItem.ts

@@ -0,0 +1,27 @@
+import { TOCNamespace } from "shared/interface";
+import { NavConfig, NavItemConfig } from "./HeaderNavConfigType";
+
+export const getSelectedNavItem = (
+  configs: NavConfig[],
+  namespace?: TOCNamespace
+): NavItemConfig | null => {
+  for (const config of configs) {
+    if (config.type === "item") {
+      const isSelected =
+        typeof config.selected === "function"
+          ? config.selected(namespace)
+          : config.selected ?? false;
+      if (isSelected) {
+        return config;
+      }
+      continue;
+    }
+
+    const item = getSelectedNavItem(config.children, namespace);
+    if (item) {
+      return item;
+    }
+  }
+  return null;
+};
+

src/templates/DocTemplate.tsx

@@ -27,6 +27,8 @@ import {
 import Seo from "components/Seo";
 import { getStable, generateUrl } from "shared/utils";
 import { NavItemConfig } from "components/Layout/Header/HeaderNavConfigType";
+import { generateNavConfig } from "components/Layout/Header/HeaderNavConfigData";
+import { getSelectedNavItem } from "components/Layout/Header/getSelectedNavItem";
 import GitCommitInfoCard from "components/Card/GitCommitInfoCard";
 import { FeedbackSection } from "components/Card/FeedbackSection";
 import { FeedbackSurveyCampaign } from "components/Campaign/FeedbackSurvey";
@@ -136,7 +138,7 @@ function DocTemplate({
       : classicNavigation;
   const navigation = filterTOC(navigationByNamespace);
 
-  const { language } = useI18next();
+  const { language, t } = useI18next();
   const haveStarter = starterNavigation.length > 0;
   const haveEssential = essentialNavigation.length > 0;
   const availablePlans = ["dedicated"];
@@ -167,7 +169,10 @@ function DocTemplate({
   const isGlobalHome = !!feature?.globalHome;
 
   const [selectedNavItem, setSelectedNavItem] =
-    React.useState<NavItemConfig | null>(null);
+    React.useState<NavItemConfig | null>(() => {
+      const headerNavConfig = generateNavConfig(t, cloudPlan, buildType, language);
+      return getSelectedNavItem(headerNavConfig, namespace);
+    });
 
   return (
     <Layout