From 9c657a6dbe1fcff86aa5f0c0cf70c064799bbada Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Mon, 6 Oct 2025 15:33:08 -0400
Subject: [PATCH 1/4] Remove DocsNavigation from DocsLayout. Update styling to
 accomodate.

---
 src/components/Header/NavBar.tsx                  | 10 +++-------
 src/components/LeftSidebar/LeftSidebar.astro      |  2 +-
 src/components/LeftSidebar/leftSidebar.module.css |  2 +-
 src/components/PageContent/PageContent.astro      |  3 +--
 src/layouts/DocsLayout.astro                      |  2 --
 5 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/components/Header/NavBar.tsx b/src/components/Header/NavBar.tsx
index 404af835727..108ab4c6cd7 100644
--- a/src/components/Header/NavBar.tsx
+++ b/src/components/Header/NavBar.tsx
@@ -35,13 +35,9 @@ export const NavBar = ({
       / - if the page has been scrolled down and the header is hidden
       / - if the page is a inner doc page or part of the "pathWithoutDocNav" or not
       */
-      const innerDocNavHeight = 56
-      let height = (navRef.current as HTMLElement).clientHeight
-      let baseHeightNoNav = 0
-      if (doubleNavbar()) {
-        height += innerDocNavHeight
-        baseHeightNoNav += innerDocNavHeight
-      }
+      const height = (navRef.current as HTMLElement).clientHeight
+      const baseHeightNoNav = 0
+
       const elements = document.body.querySelectorAll("[data-sticky]")
       elements.forEach((e: HTMLElement) => {
         if (!e.classList.contains(styles.animateTop)) {
diff --git a/src/components/LeftSidebar/LeftSidebar.astro b/src/components/LeftSidebar/LeftSidebar.astro
index 2987c6f3adb..7443eeb961d 100644
--- a/src/components/LeftSidebar/LeftSidebar.astro
+++ b/src/components/LeftSidebar/LeftSidebar.astro
@@ -74,7 +74,7 @@ function removeSlashes(url: string): string {
 const sidebarSections = getSidebarSections(section)
 ---
 
-<nav aria-labelledby="grid-left" class={styles.nav}>
+<nav aria-labelledby="grid-left" class={styles.nav} data-sticky>
   <ul class={styles.navGroups} data-sticky>
     {
       sidebarSections.map((group) => (
diff --git a/src/components/LeftSidebar/leftSidebar.module.css b/src/components/LeftSidebar/leftSidebar.module.css
index cf5a749dd6d..86156961929 100644
--- a/src/components/LeftSidebar/leftSidebar.module.css
+++ b/src/components/LeftSidebar/leftSidebar.module.css
@@ -3,7 +3,7 @@
   width: 100%;
   height: calc(100vh - var(--space-16x)); /* Subtract header height */
   position: sticky;
-  top: var(--space-16x); /* Header height */
+  top: var(--space-6x); /* Header height */
   overflow: hidden; /* Prevent nav overflow */
 }
 
diff --git a/src/components/PageContent/PageContent.astro b/src/components/PageContent/PageContent.astro
index 5e5689abf6b..fb185df3232 100644
--- a/src/components/PageContent/PageContent.astro
+++ b/src/components/PageContent/PageContent.astro
@@ -1,6 +1,5 @@
 ---
 import { MarkdownHeading } from "astro"
-import BackButton from "./BackButton.astro"
 
 export type Props = {
   titleHeading: MarkdownHeading
@@ -29,7 +28,7 @@ const { titleHeading } = Astro.props
     padding-top: var(--space-5x);
   }
 
-  /* 
+  /*
     This is a bit of trickery that keeps the content
     from shifting in the time between the DOM hydrating and the
     wrapper script finishing. The margin is supplemented
diff --git a/src/layouts/DocsLayout.astro b/src/layouts/DocsLayout.astro
index b36649c9115..28bf2e8cb33 100644
--- a/src/layouts/DocsLayout.astro
+++ b/src/layouts/DocsLayout.astro
@@ -8,7 +8,6 @@ import WhatsNext from "~/components/PageContent/WhatsNext.astro"
 import type { MarkdownHeading } from "astro"
 import StickyHeader from "~/components/StickyHeader/StickyHeader"
 import BaseLayout from "./BaseLayout.astro"
-import DocsNavigation from "~/components/DocsNavigation"
 import { VersionSelector } from "~/components/VersionSelector/index.js"
 import { detectApiReference } from "@components/VersionSelector/utils/versions"
 
@@ -60,7 +59,6 @@ const howToSteps = initialHeadings
   howToSteps={howToSteps}
 >
   <StickyHeader client:media="(max-width: 50em)" {initialHeadings} />
-  <DocsNavigation client:load pathname={currentPage} />
   <main>
     <div id="left-bg"></div>
     <div class="layout">

From 992b96c3aae0ceeb509c3edcae80c0d5c0fcc998 Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Tue, 7 Oct 2025 12:30:53 -0400
Subject: [PATCH 2/4] fix: adjust left grid sticky and padding

---
 .../DocsNavigationDesktop.tsx                 |  6 +-
 .../DocsPickerDesktop.tsx                     | 63 -------------------
 src/components/LeftSidebar/LeftSidebar.astro  |  2 +-
 .../LeftSidebar/leftSidebar.module.css        |  2 +-
 4 files changed, 3 insertions(+), 70 deletions(-)
 delete mode 100644 src/components/DocsNavigation/DocsNavigationDesktop/DocsPickerDesktop.tsx

diff --git a/src/components/DocsNavigation/DocsNavigationDesktop/DocsNavigationDesktop.tsx b/src/components/DocsNavigation/DocsNavigationDesktop/DocsNavigationDesktop.tsx
index f1a88b5395f..bf09832475c 100644
--- a/src/components/DocsNavigation/DocsNavigationDesktop/DocsNavigationDesktop.tsx
+++ b/src/components/DocsNavigation/DocsNavigationDesktop/DocsNavigationDesktop.tsx
@@ -1,6 +1,5 @@
 import { clsx } from "~/lib/clsx/clsx.ts"
 import { useNavBar } from "../../Header/useNavBar/useNavBar.ts"
-import DocsPickerDesktop from "./DocsPickerDesktop.tsx"
 import styles from "./docsNavigationDesktop.module.css"
 import QuickLinksModal from "../../Header/Nav/QuickLinksModal.tsx"
 import { useState } from "react"
@@ -29,10 +28,7 @@ function DocsNavigationDesktop({
         })}
       >
         <div className={styles.container}>
-          <div className={styles.left}>
-            <DocsPickerDesktop pathname={pathname} />
-            {children}
-          </div>
+          <div className={styles.left}>{children}</div>
           <div className={styles.links}>
             {isCcipPage ? (
               /* Custom links for CCIP Directory pages */
diff --git a/src/components/DocsNavigation/DocsNavigationDesktop/DocsPickerDesktop.tsx b/src/components/DocsNavigation/DocsNavigationDesktop/DocsPickerDesktop.tsx
deleted file mode 100644
index feb8d80bcfb..00000000000
--- a/src/components/DocsNavigation/DocsNavigationDesktop/DocsPickerDesktop.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { useState } from "react"
-import { isMatchedPath } from "../../Header/Nav/isMatchedPath.ts"
-import { getNavigationProps } from "../../Header/getNavigationProps.ts"
-import styles from "./docsPickerDesktop.module.css"
-import { clsx } from "../../Header/Nav/utils.ts"
-import defaultLogo from "../../../assets/product-logos/default-logo.svg"
-
-function DocsPickerDesktop({ pathname }: { pathname: string }) {
-  const [productMenuOpen, setProductMenuOpen] = useState(false)
-  const { subProductsNav } = getNavigationProps()
-
-  const subProductTrigger = subProductsNav?.find(({ href }) => isMatchedPath(pathname, href))
-
-  const label = subProductTrigger?.label || "Resources"
-  const icon = subProductTrigger?.label ? subProductTrigger.icon : defaultLogo.src
-
-  return (
-    <div
-      className={styles.docsPickerContainer}
-      onMouseEnter={() => setProductMenuOpen(true)}
-      onMouseLeave={() => setProductMenuOpen(false)}
-    >
-      <img src={icon} alt="" className={styles.logo} />
-      <span>{label}</span>
-      <div className={styles.caret}>
-        <span></span>
-      </div>
-      {productMenuOpen && (
-        <div className={styles.menu}>
-          <ul className={styles.column}>
-            {subProductsNav
-              .filter((item) => !item.hideFromDropdown && item.col === 1)
-              .map((item) => (
-                <li className={clsx(styles.item)} key={item.label}>
-                  <a
-                    className={clsx(styles.link, { [styles.active]: isMatchedPath(pathname, item.href) })}
-                    href={item.href}
-                  >
-                    <img className={clsx(styles.icon)} src={item.icon}></img>
-                    {item.label}
-                  </a>
-                </li>
-              ))}
-          </ul>
-          <ul className={styles.column}>
-            {subProductsNav
-              .filter((item) => !item.hideFromDropdown && item.col === 2)
-              .map((item) => (
-                <li className={clsx(styles.item)} key={item.label}>
-                  <a className={clsx(styles.link)} href={item.href}>
-                    <img className={clsx(styles.icon)} src={item.icon}></img>
-                    {item.label}
-                  </a>
-                </li>
-              ))}
-          </ul>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default DocsPickerDesktop
diff --git a/src/components/LeftSidebar/LeftSidebar.astro b/src/components/LeftSidebar/LeftSidebar.astro
index 7443eeb961d..b7bc5a806dd 100644
--- a/src/components/LeftSidebar/LeftSidebar.astro
+++ b/src/components/LeftSidebar/LeftSidebar.astro
@@ -75,7 +75,7 @@ const sidebarSections = getSidebarSections(section)
 ---
 
 <nav aria-labelledby="grid-left" class={styles.nav} data-sticky>
-  <ul class={styles.navGroups} data-sticky>
+  <ul class={styles.navGroups}>
     {
       sidebarSections.map((group) => (
         <li
diff --git a/src/components/LeftSidebar/leftSidebar.module.css b/src/components/LeftSidebar/leftSidebar.module.css
index 86156961929..86d9506a130 100644
--- a/src/components/LeftSidebar/leftSidebar.module.css
+++ b/src/components/LeftSidebar/leftSidebar.module.css
@@ -1,7 +1,7 @@
 .nav {
   padding-bottom: calc(2 * var(--doc-padding));
   width: 100%;
-  height: calc(100vh - var(--space-16x)); /* Subtract header height */
+  height: calc(100vh - var(--space-6x)); /* Subtract header height */
   position: sticky;
   top: var(--space-6x); /* Header height */
   overflow: hidden; /* Prevent nav overflow */

From 080cec3209c0667a57ebf10bc33d8c9e314ccc61 Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Tue, 7 Oct 2025 15:16:48 -0400
Subject: [PATCH 3/4] Update leftSidebar.module.css

---
 src/components/LeftSidebar/leftSidebar.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/LeftSidebar/leftSidebar.module.css b/src/components/LeftSidebar/leftSidebar.module.css
index 86d9506a130..cf5a749dd6d 100644
--- a/src/components/LeftSidebar/leftSidebar.module.css
+++ b/src/components/LeftSidebar/leftSidebar.module.css
@@ -1,9 +1,9 @@
 .nav {
   padding-bottom: calc(2 * var(--doc-padding));
   width: 100%;
-  height: calc(100vh - var(--space-6x)); /* Subtract header height */
+  height: calc(100vh - var(--space-16x)); /* Subtract header height */
   position: sticky;
-  top: var(--space-6x); /* Header height */
+  top: var(--space-16x); /* Header height */
   overflow: hidden; /* Prevent nav overflow */
 }
 

From 49485332a2164ef0a2ab94ad74cddbb79b734468 Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Thu, 9 Oct 2025 13:41:34 -0400
Subject: [PATCH 4/4] fix: remove docs from tutoriallayout

---
 src/layouts/TutorialLayout.astro | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/layouts/TutorialLayout.astro b/src/layouts/TutorialLayout.astro
index 6c572bb9647..c968d9cf957 100644
--- a/src/layouts/TutorialLayout.astro
+++ b/src/layouts/TutorialLayout.astro
@@ -7,7 +7,6 @@ import WhatsNext from "~/components/PageContent/WhatsNext.astro"
 import type { MarkdownHeading } from "astro"
 import StickyHeader from "~/components/StickyHeader/StickyHeader"
 import BaseLayout from "./BaseLayout.astro"
-import DocsNavigation from "~/components/DocsNavigation"
 import { TutorialProgress } from "~/components/CCIP/TutorialProgress/TutorialProgress"
 
 interface Props {
@@ -32,7 +31,6 @@ const formattedContentTitle = `${frontmatter.title} | ${SITE.title}`
 
 <BaseLayout title={formattedContentTitle} metadata={frontmatter.metadata}>
   <StickyHeader client:media="(max-width: 50em)" {initialHeadings} />
-  <DocsNavigation client:load pathname={currentPage} />
   <main>
     <div id="left-bg"></div>
     <div class="layout">