Fix shadow on navigation

src/components/DocsNavigation/DocsNavigationDesktop/docsNavigationDesktop.module.css

@@ -6,6 +6,7 @@
   padding-top: var(--space-4x);
   padding-bottom: var(--space-4x);
   box-shadow: var(--space-0x) var(--space-1x) var(--space-3x) var(--space-0x) #0000000f;
+  border-bottom: 1px solid #ecedef;
   z-index: 5;
   transition: top 0.5s ease;
 }

src/components/DocsNavigation/DocsNavigationMobile/docsNavigationMobile.module.css

@@ -5,6 +5,7 @@
   padding-top: var(--space-4x);
   padding-bottom: var(--space-4x);
   box-shadow: var(--space-0x) var(--space-1x) var(--space-3x) var(--space-0x) #0000000f;
+  border-bottom: 1px solid #ecedef;
   z-index: 8;
   transition: top 0.5s ease;
 }

src/components/Header/Nav/NavBar.tsx

@@ -18,16 +18,23 @@ export type NavBarProps = {
   onHideChange?: (hidden: boolean) => void
   productsNav: ProductsNav
   subProductsNav: SubProductsNav
+  doubleNavbar: boolean
 }
 
 export const navBarHeight = 64
 
-export const NavBar = ({ path, searchTrigger, onHideChange, productsNav, subProductsNav }: NavBarProps) => {
+export const NavBar = ({
+  path,
+  searchTrigger,
+  onHideChange,
+  productsNav,
+  subProductsNav,
+  doubleNavbar,
+}: NavBarProps) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [isMegaMenuOpen, setShowMegaMenu] = useState(false)
   const navRef = useRef<HTMLElement | null>(null)
-  const isInnerPage = path !== "/"
 
   const scrollDirection = useScrollDirection()
   const { isAtTopOfPage, isAtBottomOfPage } = useScrollPosition(navBarHeight)
@@ -89,9 +96,9 @@ export const NavBar = ({ path, searchTrigger, onHideChange, productsNav, subProd
     <>
       <header className={styles.header} ref={navRef}>
         <div
-          className={clsx(styles.navBar, { [styles.headerHidden]: shouldHideHeader, [styles.noShadow]: isInnerPage })}
+          className={clsx(styles.navBar, { [styles.headerHidden]: shouldHideHeader, [styles.noShadow]: doubleNavbar })}
         >
-          <div className={clsx(styles.container, { [styles.isHomepage]: !isInnerPage })}>
+          <div className={clsx(styles.container, { [styles.isHomepage]: !doubleNavbar })}>
             <div className={styles.logoSection} onMouseEnter={exitMegamenu}>
               <a rel="noreferrer noopener" className={clsx("home-logo", styles.logo)} href="https://dev.chain.link/">
                 <img

src/components/Header/Nav/navBar.module.css

@@ -10,13 +10,15 @@
   width: 100%;
   background: rgba(255, 255, 255, 0.65);
   box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06);
+  border-bottom: 1px solid #ecedef;
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   transition: transform 0.3s ease-in-out;
 }
 
 .noShadow {
   box-shadow: none;
+  border-bottom: none;
 }
 
 .container {

src/components/Header/NavBar.tsx

@@ -10,19 +10,24 @@ export const NavBar = ({ path, showSearch = true }: { path: string; showSearch?:
 
   const { setNavBarInfo } = useNavBar()
 
+  const doubleNavbar = () => {
+    const pathWithoutDocNav = ["/quickstarts/", "/builders-quick-links"]
+    const shouldAddDocNavigation = !pathWithoutDocNav.some((p) => path.includes(p))
+    const isHomepage = path === "/"
+    return shouldAddDocNavigation && !isHomepage
+  }
+
   const onHideChange = (hidden: boolean) => {
     if (navRef.current) {
       /* This method calculate the height required for the sticky headers within the page content.
       / - The height is determined by two different factors:
       / - 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 pathWithoutDocNav = ["/quickstarts/"]
-      const shouldAddDocNavigation = !pathWithoutDocNav.some((p) => path.includes(p))
       const innerDocNavHeight = 56
       let height = (navRef.current as HTMLElement).clientHeight
       let baseHeightNoNav = 0
-      if (shouldAddDocNavigation) {
+      if (doubleNavbar()) {
         height += innerDocNavHeight
         baseHeightNoNav += innerDocNavHeight
       }
@@ -44,6 +49,7 @@ export const NavBar = ({ path, showSearch = true }: { path: string; showSearch?:
         path={path}
         searchTrigger={showSearch ? <Search /> : undefined}
         onHideChange={onHideChange}
+        doubleNavbar={doubleNavbar()}
       />
     </span>
   )

src/layouts/QuickstartLayout.astro

@@ -81,6 +81,7 @@ const formattedContentTitle = `${frontmatter.title} | ${CONFIG.SITE.title}`
         grid-template-areas: "top main_content" "bottom main_content";
         grid-template-columns: 2fr 1fr;
         gap: 2em;
+        margin-left: var(--space-2x);
       }
 
       #right-bg {
@@ -102,6 +103,11 @@ const formattedContentTitle = `${frontmatter.title} | ${CONFIG.SITE.title}`
         grid-area: bottom;
       }
     }
+    @media (min-width: 72em) {
+      .layout {
+        margin-left: var(--space-8x);
+      }
+    }
   </style>
 
   <script>