fix mobile

Author: aelmanaa

src/components/DocsNavigation/DocsNavigationMobile/DocsPickerMobile.tsx

@@ -53,16 +53,6 @@ export function ProductNavigation({ path }: Props) {
   const label = subProductTrigger?.label || "Resources"
   const icon = subProductTrigger?.label ? subProductTrigger.icon : defaultLogo.src
 
-  // Helper function to recursively map pages and preserve all metadata
-  const mapPageWithChildren = (page: any): any => ({
-    label: page.label,
-    href: page.href,
-    sdkLang: page.sdkLang,
-    chainTypes: page.chainTypes,
-    highlightAsCurrent: page.highlightAsCurrent,
-    children: page.children ? page.children.map(mapPageWithChildren) : [],
-  })
-
   useEffect(() => {
     const foundSubProduct = productsNav.categories.find((category) =>
       category.items.some((item) => item.subProducts && isMatchedPath(path, item.href))
@@ -75,7 +65,7 @@ export function ProductNavigation({ path }: Props) {
         const items = subProduct.subProducts.map((subProductItem) => ({
           label: subProductItem.label,
           href: "#",
-          pages: subProductItem.items.map(mapPageWithChildren),
+          pages: subProductItem.items,
         }))
 
         const safeSubProducts: SubProducts = {

src/components/Header/getNavigationProps.ts

@@ -13,6 +13,7 @@ import nodesLogo from "../../assets/product-logos/node-logo.svg"
 import quickstartLogo from "../../assets/product-logos/quickstart-logo.svg"
 import { SIDEBAR as sidebar } from "../../config/sidebar.ts"
 import type { ChainType } from "../../config/types.js"
+import { propagateChainTypes } from "../../utils/chainType.js"
 
 interface Page {
   label: string
@@ -53,10 +54,14 @@ const mapContents = (contents: SidebarContent[], pageSdkLangMap: Map<string, str
 }
 
 const getSubProducts = (sectionData, pageSdkLangMap: Map<string, string>) => {
-  const structuredData = sectionData.map((item) => ({
-    label: item.section,
-    items: mapContents(item.contents, pageSdkLangMap),
-  }))
+  const structuredData = sectionData.map((item) => {
+    // Propagate chainTypes from parent to children for consistent filtering
+    const contentsWithPropagatedChainTypes = propagateChainTypes(item.contents)
+    return {
+      label: item.section,
+      items: mapContents(contentsWithPropagatedChainTypes, pageSdkLangMap),
+    }
+  })
   return structuredData
 }
 

src/content/ccip/concepts/architecture/onchain/index.mdx

@@ -11,8 +11,4 @@ metadata:
 isIndex: true
 ---
 
-This section details the onchain components of the CCIP architecture, covering both EVM-compatible chains and SVM-based chains such as Solana.
-
-- **[EVM Architecture](/ccip/concepts/architecture/onchain/evm)**: Learn about the onchain components specific to EVM environments.
-- **[SVM Architecture](/ccip/concepts/architecture/onchain/svm)**: Explore the onchain programs and components specific for SVM environments.
-- **[Aptos Architecture](/ccip/concepts/architecture/onchain/aptos)**: Understand the onchain components and message structures for Aptos environments.
+This section details the onchain components of the CCIP architecture, including routers, onramps, offramps, commit stores, token pools, and receiver contracts or programs. These components operate directly on blockchains to enable secure cross-chain communication. The implementation varies by blockchain family (EVM, Solana, Aptos), but the core architecture remains consistent across all supported chains.

src/content/ccip/concepts/best-practices/index.mdx

@@ -11,8 +11,4 @@ metadata:
 isIndex: true
 ---
 
-This section outlines recommended practices for using Chainlink CCIP effectively and securely.
-
-- **[EVM Best Practices](/ccip/concepts/best-practices/evm)**: Recommended guidelines for interacting with CCIP on EVM-compatible chains.
-- **[SVM Best Practices](/ccip/concepts/best-practices/svm)**: Recommended guidelines for interacting with CCIP on SVM-based chains like Solana.
-- **[Aptos Best Practices](/ccip/concepts/best-practices/aptos)**: Recommended guidelines for interacting with CCIP on Aptos chain.
+This section outlines recommended practices for using Chainlink CCIP effectively and securely across different blockchain families. Learn about security considerations, message verification, token administration, liquidity management, multi-signature patterns, and blockchain-specific guidelines to build robust cross-chain applications on EVM-compatible chains, Solana, and Aptos.

src/content/ccip/concepts/cross-chain-token/index.mdx

@@ -10,11 +10,6 @@ metadata:
 isIndex: true
 ---
 
-This section explains the Cross-Chain Token (CCT) standard, a Chainlink CCIP feature enabling secure and reliable cross-chain token transfers. Learn how to make your tokens compatible with CCIP.
+This section explains the Cross-Chain Token (CCT) standard, a Chainlink CCIP feature enabling secure and reliable cross-chain token transfers. Learn about the architecture, token requirements, token pool types (Lock and Release, Burn and Mint), registration processes, administrative roles, and upgrade mechanisms needed to make your tokens compatible with CCIP across different blockchain families.
 
-- **[Overview](/ccip/concepts/cross-chain-token/overview)**: Get a high-level summary of the CCT standard and its benefits.
-- **[Architecture](/ccip/concepts/cross-chain-token/evm/architecture)**: Explore the CCT architecture components.
-- **[Tokens](/ccip/concepts/cross-chain-token/evm/tokens)**: Learn about token requirements and compatibility.
-- **[Token Pools](/ccip/concepts/cross-chain-token/evm/token-pools)**: Understand token pool types and deployment.
-- **[Registration & Administration](/ccip/concepts/cross-chain-token/evm/registration-administration)**: Details on registering tokens and managing administrative roles.
-- **[Upgradability](/ccip/concepts/cross-chain-token/evm/upgradability)**: Information on upgrading token pool contracts.
+For a high-level summary of the CCT standard and its benefits, see the [Overview](/ccip/concepts/cross-chain-token/overview) page.

src/utils/chainType.test.ts

@@ -0,0 +1,229 @@
+import { expect, test, describe } from "@jest/globals"
+import { propagateChainTypes } from "./chainType.js"
+import type { SectionContent } from "~/config/sidebar.js"
+
+describe("propagateChainTypes", () => {
+  test("children without chainTypes inherit from parent", () => {
+    const input: SectionContent[] = [
+      {
+        title: "API Reference",
+        url: "ccip/api-reference/evm",
+        chainTypes: ["evm"],
+        children: [
+          { title: "Messages", url: "ccip/api-reference/evm/messages" },
+          { title: "Router", url: "ccip/api-reference/evm/router" },
+        ],
+      },
+    ]
+
+    const result = propagateChainTypes(input)
+
+    expect(result[0].children![0].chainTypes).toEqual(["evm"])
+    expect(result[0].children![1].chainTypes).toEqual(["evm"])
+  })
+
+  test("children with explicit chainTypes are not overridden", () => {
+    const input: SectionContent[] = [
+      {
+        title: "Parent",
+        url: "parent",
+        chainTypes: ["evm"],
+        children: [
+          { title: "Child1", url: "child1" }, // Should inherit
+          { title: "Child2", url: "child2", chainTypes: ["solana", "aptos"] }, // Should keep its own
+        ],
+      },
+    ]
+
+    const result = propagateChainTypes(input)
+
+    expect(result[0].children![0].chainTypes).toEqual(["evm"])
+    expect(result[0].children![1].chainTypes).toEqual(["solana", "aptos"])
+  })
+
+  test("nested children (grandchildren) inherit correctly", () => {
+    const input: SectionContent[] = [
+      {
+        title: "Grandparent",
+        url: "grandparent",
+        chainTypes: ["evm"],
+        children: [
+          {
+            title: "Parent",
+            url: "parent",
+            children: [
+              { title: "Child", url: "child" },
+              { title: "AnotherChild", url: "another-child" },
+            ],
+          },
+        ],
+      },
+    ]
+
+    const result = propagateChainTypes(input)
+
+    // Parent inherits from grandparent
+    expect(result[0].children![0].chainTypes).toEqual(["evm"])
+    // Children inherit from parent (which inherited from grandparent)
+    expect(result[0].children![0].children![0].chainTypes).toEqual(["evm"])
+    expect(result[0].children![0].children![1].chainTypes).toEqual(["evm"])
+  })
+
+  test("parent with chainTypes, intermediate child without, grandchild should inherit from parent", () => {
+    const input: SectionContent[] = [
+      {
+        title: "API Reference",
+        url: "api",
+        chainTypes: ["solana"],
+        children: [
+          {
+            title: "v1.6.0",
+            url: "v1.6.0",
+            // No chainTypes - should inherit solana
+            children: [
+              { title: "Messages", url: "messages" }, // Should inherit solana
+            ],
+          },
+        ],
+      },
+    ]
+
+    const result = propagateChainTypes(input)
+
+    expect(result[0].children![0].chainTypes).toEqual(["solana"])
+    expect(result[0].children![0].children![0].chainTypes).toEqual(["solana"])
+  })
+
+  test("universal items (no chainTypes) remain universal", () => {
+    const input: SectionContent[] = [
+      {
+        title: "Overview",
+        url: "overview",
+        // No chainTypes - should remain undefined (universal)
+      },
+    ]
+
+    const result = propagateChainTypes(input)
+
+    expect(result[0].chainTypes).toBeUndefined()
+  })
+
+  test("universal parent with chain-specific children", () => {
+    const input: SectionContent[] = [
+      {
+        title: "Universal Parent",
+        url: "parent",
+        // No chainTypes
+        children: [
+          { title: "EVM Child", url: "evm-child", chainTypes: ["evm"] },
+          { title: "Solana Child", url: "solana-child", chainTypes: ["solana"] },
+        ],
+      },
+    ]
+
+    const result = propagateChainTypes(input)
+
+    // Parent remains universal
+    expect(result[0].chainTypes).toBeUndefined()
+    // Children keep their explicit chainTypes
+    expect(result[0].children![0].chainTypes).toEqual(["evm"])
+    expect(result[0].children![1].chainTypes).toEqual(["solana"])
+  })
+
+  test("empty array of contents returns empty array", () => {
+    const input: SectionContent[] = []
+    const result = propagateChainTypes(input)
+    expect(result).toEqual([])
+  })
+
+  test("items without children are handled correctly", () => {
+    const input: SectionContent[] = [
+      { title: "Item1", url: "item1", chainTypes: ["evm"] },
+      { title: "Item2", url: "item2", chainTypes: ["solana"] },
+    ]
+
+    const result = propagateChainTypes(input)
+
+    expect(result[0].chainTypes).toEqual(["evm"])
+    expect(result[1].chainTypes).toEqual(["solana"])
+  })
+
+  test("multiple chain types are preserved", () => {
+    const input: SectionContent[] = [
+      {
+        title: "Multi-chain Parent",
+        url: "parent",
+        chainTypes: ["evm", "solana", "aptos"],
+        children: [{ title: "Child", url: "child" }],
+      },
+    ]
+
+    const result = propagateChainTypes(input)
+
+    expect(result[0].children![0].chainTypes).toEqual(["evm", "solana", "aptos"])
+  })
+
+  test("does not mutate original input", () => {
+    const input: SectionContent[] = [
+      {
+        title: "Parent",
+        url: "parent",
+        chainTypes: ["evm"],
+        children: [{ title: "Child", url: "child" }],
+      },
+    ]
+
+    const originalChildChainTypes = input[0].children![0].chainTypes
+
+    propagateChainTypes(input)
+
+    // Original should not have been mutated
+    expect(input[0].children![0].chainTypes).toBe(originalChildChainTypes)
+  })
+
+  test("real-world scenario: CCIP API Reference structure", () => {
+    // Simulates the actual CCIP sidebar structure
+    const input: SectionContent[] = [
+      {
+        title: "Tools and Resources",
+        url: "ccip/tools-resources",
+        children: [
+          {
+            title: "API Reference",
+            url: "ccip/api-reference/svm",
+            chainTypes: ["solana"],
+            children: [
+              {
+                title: "v1.6.0",
+                url: "ccip/api-reference/svm/v1.6.0",
+                isCollapsible: true,
+                children: [
+                  { title: "Messages", url: "ccip/api-reference/svm/v1.6.0/messages" },
+                  { title: "Router", url: "ccip/api-reference/svm/v1.6.0/router" },
+                  { title: "Receiver", url: "ccip/api-reference/svm/v1.6.0/receiver" },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ]
+
+    const result = propagateChainTypes(input)
+
+    // Top-level has no chainTypes (universal)
+    expect(result[0].chainTypes).toBeUndefined()
+
+    // API Reference has solana
+    expect(result[0].children![0].chainTypes).toEqual(["solana"])
+
+    // v1.6.0 inherits solana
+    expect(result[0].children![0].children![0].chainTypes).toEqual(["solana"])
+
+    // All API endpoints inherit solana
+    const endpoints = result[0].children![0].children![0].children!
+    expect(endpoints[0].chainTypes).toEqual(["solana"]) // Messages
+    expect(endpoints[1].chainTypes).toEqual(["solana"]) // Router
+    expect(endpoints[2].chainTypes).toEqual(["solana"]) // Receiver
+  })
+})

src/utils/chainType.ts

@@ -55,6 +55,51 @@ export function filterContentByChainType(contents: SectionContent[], selectedCha
     .filter((item): item is SectionContent => item !== null)
 }
 
+/**
+ * Recursively propagates chainTypes from parent to children
+ *
+ * This ensures that children inherit their parent's chainTypes if they don't have their own.
+ * This is critical for mobile navigation where items are rendered as siblings rather than
+ * nested in DOM hierarchy, so CSS cascade doesn't provide implicit filtering.
+ *
+ * Rules:
+ * - If child has explicit chainTypes: Keep them (don't override)
+ * - If child has no chainTypes but parent does: Inherit from parent
+ * - If neither child nor parent has chainTypes: Remain universal (no chainTypes)
+ * - Recursively process all descendants
+ *
+ * Examples:
+ *   Parent: { title: "API Reference", chainTypes: ['evm'], children: [...] }
+ *   Child:  { title: "Messages" }  // No chainTypes
+ *   Result: { title: "Messages", chainTypes: ['evm'] }  // Inherited
+ *
+ *   Parent: { title: "API Reference", chainTypes: ['evm'], children: [...] }
+ *   Child:  { title: "Router", chainTypes: ['evm', 'solana'] }  // Has own
+ *   Result: { title: "Router", chainTypes: ['evm', 'solana'] }  // Preserved
+ *
+ * @param contents - Array of sidebar content items
+ * @param parentChainTypes - ChainTypes from parent (used in recursion)
+ * @returns Contents with propagated chainTypes
+ */
+export function propagateChainTypes(contents: SectionContent[], parentChainTypes?: ChainType[]): SectionContent[] {
+  return contents.map((item) => {
+    // Create new item to avoid mutation
+    const processed: SectionContent = { ...item }
+
+    // If item doesn't have chainTypes, inherit from parent
+    if (!processed.chainTypes && parentChainTypes) {
+      processed.chainTypes = parentChainTypes
+    }
+
+    // Recursively process children, passing this item's chainTypes as parent
+    if (processed.children) {
+      processed.children = propagateChainTypes(processed.children, processed.chainTypes)
+    }
+
+    return processed
+  })
+}
+
 /**
  * Filters sidebar DOM elements by chain type using show/hide approach
  *