fix mobile

Author: aelmanaa

src/components/DocsNavigation/DocsNavigationMobile/DocsPickerMobile.tsx

@@ -58,6 +58,7 @@ export function ProductNavigation({ path }: Props) {
     label: page.label,
     href: page.href,
     sdkLang: page.sdkLang,
+    chainTypes: page.chainTypes,
     highlightAsCurrent: page.highlightAsCurrent,
     children: page.children ? page.children.map(mapPageWithChildren) : [],
   })

src/components/DocsNavigation/DocsNavigationMobile/SubProductContent.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useRef } from "react"
 import { useStore } from "@nanostores/react"
 import { selectedLanguage } from "~/lib/languageStore.js"
+import { selectedChainType } from "~/stores/chainType.js"
+import { applyChainTypeFilter } from "~/utils/chainType.js"
 import { BackArrowIcon } from "./BackArrowIcon.js"
 import { Page } from "../../Header/Nav/config.js"
 import styles from "./subProductContent.module.css"
@@ -42,8 +44,17 @@ const PageLink = ({ page, currentPath, level }: { page: Page; currentPath: strin
     fontWeight: isActive ? "500" : "normal",
   }
 
+  // Format chainTypes as data attribute (matching desktop sidebar)
+  const chainAttr = page.chainTypes ? page.chainTypes.join(",") : "universal"
+
   return (
-    <a ref={linkRef} style={linkStyle} className={`${styles.link} subproduct-link level-${level}`} href={adjustedHref}>
+    <a
+      ref={linkRef}
+      style={linkStyle}
+      className={`${styles.link} subproduct-link level-${level}`}
+      href={adjustedHref}
+      data-chain-types={chainAttr}
+    >
       {page.label}
     </a>
   )
@@ -52,7 +63,7 @@ const PageLink = ({ page, currentPath, level }: { page: Page; currentPath: strin
 const renderPages = (pages: Page[], currentPath: string, currentLang: string, level = 0): React.ReactNode[] => {
   return pages
     .filter((page) => {
-      // If page has sdkLang, only show if it matches current language
+      // Filter by sdkLang (for CRE language switching)
       if (page.sdkLang) {
         return page.sdkLang === currentLang
       }
@@ -71,6 +82,12 @@ const renderPages = (pages: Page[], currentPath: string, currentLang: string, le
 
 export const SubProductContent = ({ subProducts, onSubproductClick, currentPath }: Props) => {
   const currentLang = useStore(selectedLanguage)
+  const currentChain = useStore(selectedChainType)
+
+  // Apply chain type filtering using shared utility (same as desktop sidebar)
+  useEffect(() => {
+    applyChainTypeFilter(currentChain)
+  }, [currentChain])
 
   if (!subProducts) {
     return null

src/components/Header/Nav/config.tsx

@@ -1,3 +1,5 @@
+import type { ChainType } from "~/config/types.js"
+
 type LinksConfig = {
   docs?: boolean
   githubUrl?: string
@@ -8,6 +10,7 @@ export type Page = {
   label: string
   href: string
   sdkLang?: string
+  chainTypes?: ChainType[]
   highlightAsCurrent?: string[]
   children?: Page[]
 }

src/components/Header/getNavigationProps.ts

@@ -12,18 +12,21 @@ import generalLogo from "../../assets/product-logos/general-logo.svg"
 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"
 
 interface Page {
   label: string
   href: string
   sdkLang?: string
+  chainTypes?: ChainType[]
   children?: Page[]
 }
 
 interface SidebarContent {
   title?: string
   url?: string
   highlightAsCurrent?: string[]
+  chainTypes?: ChainType[]
   children?: SidebarContent[]
 }
 
@@ -37,6 +40,7 @@ const mapContents = (contents: SidebarContent[], pageSdkLangMap: Map<string, str
       label,
       href,
       ...(sdkLang && { sdkLang }),
+      ...(page.chainTypes && { chainTypes: page.chainTypes }),
       ...(page.highlightAsCurrent && { highlightAsCurrent: page.highlightAsCurrent }),
     }
 

src/components/LeftSidebar/LeftSidebar.astro

@@ -161,32 +161,14 @@ const sidebarSections = getSidebarSections(section)
 
 <script>
   import { selectedChainType } from "~/stores/chainType"
+  import { applyChainTypeFilter } from "~/utils/chainType.js"
 
   /**
    * Filters sidebar items based on selected chain type
-   * - Shows items with matching chainTypes or universal items
-   * - Hides items that don't match the selected chain
+   * Uses shared utility function for consistency with mobile drawer
    */
   function filterSidebarByChainType() {
-    const currentChain = selectedChainType.get()
-    const sidebarItems = document.querySelectorAll<HTMLElement>("[data-chain-types]")
-
-    sidebarItems.forEach((item) => {
-      const chainTypesAttr = item.getAttribute("data-chain-types")
-
-      if (chainTypesAttr === "universal") {
-        item.style.display = ""
-      } else if (chainTypesAttr) {
-        const itemChains = chainTypesAttr.split(",")
-        if (itemChains.includes(currentChain)) {
-          item.style.display = ""
-        } else {
-          item.style.display = "none"
-        }
-      } else {
-        item.style.display = ""
-      }
-    })
+    applyChainTypeFilter(selectedChainType.get())
   }
 
   // Run on initial load

src/content/ccip/getting-started/aptos.mdx

@@ -1,7 +1,7 @@
 ---
 section: ccip
 date: Last Modified
-title: "Getting Started with Chainlink CCIP on Aptos"
+title: "Getting Started (Aptos)"
 metadata:
   description: "Get started with Chainlink CCIP on Aptos: essential guides and resources to integrate cross‑chain messaging and token transfers with Aptos using the Move language."
   excerpt: "Chainlink CCIP, Cross-chain interoperability, Getting started, Aptos, Move language, Blockchain integration, Cross-chain dApps, Token bridges, Cross-chain messaging, Fungible Assets"

src/content/ccip/getting-started/svm.mdx

@@ -1,7 +1,7 @@
 ---
 section: ccip
 date: Last Modified
-title: "Getting Started with Chainlink CCIP on Solana (SVM)"
+title: "Getting Started (Solana)"
 metadata:
   description: "Get started with Chainlink CCIP on Solana: essential guides and resources to integrate cross‑chain messaging and token transfers with SVM chains."
   excerpt: "Chainlink CCIP, Cross-chain interoperability, Getting started, SVM chains, Solana, Blockchain integration, Cross-chain dApps, Token bridges, Cross-chain messaging, SPL Tokens, Token-2022"

src/layouts/DocsLayout.astro

@@ -12,6 +12,8 @@ import DocsNavigation from "~/components/DocsNavigation"
 import { VersionSelector } from "~/components/VersionSelector/index.js"
 import { detectApiReference } from "@components/VersionSelector/utils/versions"
 import { LanguageSwitcherDropdown } from "~/components/LanguageSwitcherDropdown"
+import { ChainTypeSelector } from "~/components/ChainSelector"
+import { isChainAwareSection } from "~/config/chainTypes"
 
 interface Props {
   frontmatter: BaseFrontmatter
@@ -48,6 +50,9 @@ const includeLinkToWalletScript = !!Astro.props.frontmatter.metadata?.linkToWall
 // Detect if this is an API reference page and get the product
 const { isApiReference, product, isVersioned } = detectApiReference(currentPage)
 
+// Check if this section supports chain type filtering
+const showChainSelector = isChainAwareSection(frontmatter.section)
+
 // Derive HowTo steps from headings (H2/H3)
 const howToSteps = initialHeadings
   .filter((h) => h.depth === 2 || h.depth === 3)
@@ -77,6 +82,13 @@ const howToSteps = initialHeadings
             </div>
           )
         }
+        {
+          showChainSelector && (
+            <div class="chain-selector-mobile">
+              <ChainTypeSelector client:only="react" />
+            </div>
+          )
+        }
         {isApiReference && product && isVersioned && <VersionSelector product={product} currentPath={currentPage} />}
         <PageContent {titleHeading}>
           <slot />
@@ -190,6 +202,19 @@ const howToSteps = initialHeadings
         display: none;
       }
     }
+
+    /* Chain Selector - Mobile (< 800px) */
+    .chain-selector-mobile {
+      display: block;
+      margin-bottom: var(--space-6x);
+    }
+
+    /* Hide mobile chain selector on tablet+ (left sidebar version visible) */
+    @media (min-width: 50em) {
+      .chain-selector-mobile {
+        display: none;
+      }
+    }
   </style>
 
   <script define:vars={{ includeLinkToWalletScript }}>

src/utils/chainType.ts

@@ -54,3 +54,55 @@ export function filterContentByChainType(contents: SectionContent[], selectedCha
     })
     .filter((item): item is SectionContent => item !== null)
 }
+
+/**
+ * Filters sidebar DOM elements by chain type using show/hide approach
+ *
+ * This function is used by both desktop sidebar and mobile drawer to
+ * filter navigation items based on the selected chain type.
+ *
+ * Filtering rules:
+ * - data-chain-types="universal": Always visible (no chain restriction)
+ * - data-chain-types includes selected chain: Visible
+ * - data-chain-types doesn't include selected chain: Hidden (display: none)
+ * - No data-chain-types attribute: Always visible (legacy/universal content)
+ *
+ * Performance: Operates on DOM after initial render for instant switching
+ *
+ * @param currentChain - Currently selected chain type from store
+ *
+ * @example
+ * // In Astro script tag
+ * import { applyChainTypeFilter } from "~/utils/chainType.js"
+ * applyChainTypeFilter(selectedChainType.get())
+ *
+ * @example
+ * // In React component
+ * import { applyChainTypeFilter } from "~/utils/chainType.js"
+ * useEffect(() => {
+ *   applyChainTypeFilter(currentChain)
+ * }, [currentChain])
+ */
+export function applyChainTypeFilter(currentChain: ChainType): void {
+  const sidebarItems = document.querySelectorAll<HTMLElement>("[data-chain-types]")
+
+  sidebarItems.forEach((item) => {
+    const chainTypesAttr = item.getAttribute("data-chain-types")
+
+    if (chainTypesAttr === "universal") {
+      // Always show universal content
+      item.style.display = ""
+    } else if (chainTypesAttr) {
+      // Check if item's chains include the current selection
+      const itemChains = chainTypesAttr.split(",")
+      if (itemChains.includes(currentChain)) {
+        item.style.display = ""
+      } else {
+        item.style.display = "none"
+      }
+    } else {
+      // No chain types attribute means universal/legacy content
+      item.style.display = ""
+    }
+  })
+}