Revert "Add DocsPickerDesktop component and integrate into DocsNavigationDesktop; update layout files to include DocsNavigation"

This reverts commit cca7e2a.

Author: markshenouda

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 */

src/components/DocsNavigation/DocsNavigationDesktop/DocsPickerDesktop.tsx

@@ -96,7 +96,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 999;
 }
 
 .modalContentWrapper {

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

@@ -6,9 +6,9 @@ import RecursiveSidebar from "./RecursiveSidebar.astro"
 import { LanguageSwitcherDropdown } from "~/components/LanguageSwitcherDropdown"
 import { ChainTypeSelector } from "~/components/ChainSelector"
 import { isChainAwareSection } from "~/config/chainTypes"
-import { filterContentByChainType } from "~/utils/chainType"
-import type { ChainType } from "~/config/types"
 import styles from "./leftSidebar.module.css"
+import DocsHeaderTitle from "../DocsHeaderTitle/DocsHeaderTitle.astro"
+import * as CONFIG from "../../config"
 
 type SectionEntryWithParent = SectionEntry & { parentSection?: string }
 
@@ -83,14 +83,10 @@ const sidebarSections = getSidebarSections(section)
 ---
 
 <nav aria-labelledby="grid-left" class={styles.nav}>
-  {
-    section === "cre" && (
-      <div class={styles.languageSwitcherTablet}>
-        <LanguageSwitcherDropdown client:only="react" />
-      </div>
-    )
-  }
-  {showChainSelector && <ChainTypeSelector client:only="react" />}
+  <div class={styles.sidebarDropdowns}>
+    {section === "cre" && <LanguageSwitcherDropdown client:only="react" />}
+    {showChainSelector && <ChainTypeSelector client:only="react" />}
+  </div>
   <ul class={styles.navGroups} data-sticky>
     {
       sidebarSections.map((group) => (
@@ -107,6 +103,39 @@ const sidebarSections = getSidebarSections(section)
         </li>
       ))
     }
+    <div class={styles.quickLinks}>
+      <li class={styles.headerLink}>
+        <a href="/builders-quick-links" target="_blank" id="quick-links-sidebar-link">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M2.5 9.20055L7.18129 2H12.2965L9.62194 5.59959H13.5L5.97787 14H4.50671L7.18135 9.20055H2.5Z"
+              fill="#0D5DFF"></path>
+          </svg>
+          <p>Quick links</p>
+        </a>
+      </li>
+      <li class={styles.headerLink}>
+        <a
+          class={styles.link}
+          href="https://github.com/smartcontractkit/documentation"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img height={16} width={16} src="/assets/icons/github-blue.svg" alt="GitHub repository" />
+          <span>Github</span>
+        </a>
+      </li>
+      {
+        CONFIG.COMMUNITY_INVITE_URL && (
+          <li class={styles.headerLink}>
+            <a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank" rel="noopener noreferrer">
+              <img src="/images/discord.svg" loading="lazy" width="16" height="16" alt="Discord" />
+              <span>Join our community</span>
+            </a>
+          </li>
+        )
+      }
+    </div>
   </ul>
 </nav>
 
@@ -124,7 +153,7 @@ const sidebarSections = getSidebarSections(section)
 </style>
 
 <script>
-  import { initializeChainType } from "~/stores/chainType"
+  import { initializeChainType } from "~/stores/chainType.js"
 
   /**
    * Initialize chain type selection from URL on page load
@@ -160,7 +189,7 @@ const sidebarSections = getSidebarSections(section)
 </script>
 
 <script>
-  import { selectedChainType } from "~/stores/chainType"
+  import { selectedChainType } from "~/stores/chainType.js"
 
   /**
    * Filters sidebar items based on selected chain type

src/components/LeftSidebar/LeftSidebar.astro

@@ -1,15 +1,24 @@
 .nav {
-  padding-bottom: calc(2 * var(--doc-padding));
   width: 100%;
-  height: calc(100vh - var(--space-16x)); /* Subtract header height */
+  height: calc(100vh - var(--space-16x));
+  /* Subtract header height */
   position: sticky;
-  top: var(--space-16x); /* Header height */
-  overflow: hidden; /* Prevent nav overflow */
+  top: var(--space-16x);
+  /* Header height */
+  overflow: hidden;
+  /* Prevent nav overflow */
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebarDropdowns {
+  padding-top: var(--space-3x);
+  flex-shrink: 0;
 }
 
 .navGroups {
-  padding: var(--doc-padding) var(--space-8x) var(--doc-padding) 0;
-  height: 100%;
+  padding: var(--doc-padding) var(--space-8x) calc(2 * var(--doc-padding)) 0;
+  flex: 1;
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: var(--gray-300) transparent;
@@ -47,8 +56,7 @@
 .navGroupTitle {
   margin-bottom: var(--space-2x);
   margin-top: var(--space-1x);
-  color: var(--gray-900);
-  font-weight: 600;
+  color: var(--muted-foreground);
   line-height: 24px;
   font-size: 15px;
   display: flex;
@@ -57,10 +65,9 @@
   cursor: pointer;
   list-style: none;
   position: relative;
-  padding-left: var(--space-6x);
 }
 
-.navGroupTitle::before {
+.navGroupTitle::after {
   content: "";
   width: 6px;
   height: 6px;
@@ -71,21 +78,16 @@
   transition: transform 0.15s ease;
   position: absolute;
   top: calc(50% - 4px);
-  left: var(--space-2x);
+  right: var(--space-2x);
 }
 
-details[open] > .navGroupTitle::before {
+details[open] > .navGroupTitle::after {
   transform: rotate(45deg);
   top: calc(50% - 5px);
 }
 
-details:hover .navGroupTitle::before {
-  border-color: var(--color-text-link);
-}
-
 .navGroupEntries {
   margin-bottom: 0;
-  padding-left: var(--space-6x);
 }
 
 details {
@@ -113,9 +115,68 @@ details[open] > .navGroupTitle {
   color: hsla(var(--color-base-white), 100%, 1);
 }
 
+.link {
+  display: flex;
+  align-items: center;
+  padding: var(--space-3x) var(--space-2x);
+  gap: var(--space-2x);
+  margin-right: var(--space-2x);
+
+  color: var(--gray-900, #141921);
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}
+
+.quickLinks {
+  margin-top: 60px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2x);
+}
+
+.headerLink {
+  font-size: 14px;
+  color: var(--color-text-link);
+  padding: var(--space-1x) var(--space-2x);
+}
+
+.headerLink * {
+  margin: 0;
+  max-width: 100%;
+  color: inherit;
+  font: inherit;
+}
+
+.headerLink.active,
+.headerLink:hover,
+.headerLink:focus {
+  color: var(--theme-accent);
+  fill: var(--theme-accent);
+}
+
+.headerLink:focus-within {
+  color: var(--theme-text-light);
+  fill: var(--theme-text-light);
+}
+
+.headerLink a {
+  display: inline-flex;
+  gap: var(--space-2x);
+  width: 100%;
+  padding: 0.15em 0 0.15em 0;
+  text-decoration: none;
+}
+
+.headerLink {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.25rem;
+}
+
 /* Language Switcher for tablet screens (800px-1200px) */
 .languageSwitcherTablet {
-  padding: var(--space-6x) var(--space-6x) 0 var(--space-6x);
+  padding: var(--space-6x) 0;
   display: none;
 }