feat: Docs Navigation for Desktop (#7)

* feat: Docs Navigation for Desktop

* fix: remove unused comments

* fix: quicklinks

* fix: left side nav

src/components/DocsNavigation/DocsNavigationDesktop.tsx

@@ -0,0 +1,42 @@
+import { clsx } from "~/lib"
+import { useNavBar } from "../Header/useNavBar/useNavBar"
+import DocsPickerDesktop from "./DocsPickerDesktop"
+import styles from "./docsNavigationDesktop.module.css"
+import QuickLinksModal from "../Header/Nav/QuickLinksModal"
+import { useState } from "react"
+
+function DocsNavigationDesktop({ pathname }: { pathname: string }) {
+  const { $navBarInfo } = useNavBar()
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  return (
+    <>
+      <nav
+        className={clsx(styles.nav, {
+          [styles.hidden]: $navBarInfo.hidden,
+        })}
+      >
+        <div className={styles.container}>
+          <DocsPickerDesktop pathname={pathname} />
+          <div className={styles.links}>
+            <button className={styles.link} onClick={() => setIsModalOpen(true)}>
+              <img height={24} width={24} src="/assets/icons/quick-links.svg" />
+              <span>Quick Links</span>
+            </button>
+            <a
+              className={styles.link}
+              href="https://github.com/smartcontractkit/documentation"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <img height={24} width={24} src="/assets/icons/github-blue.svg" />
+              <span>Github</span>
+            </a>
+          </div>
+        </div>
+      </nav>
+      {isModalOpen && <QuickLinksModal toggleModal={() => setIsModalOpen((state) => !state)} />}
+    </>
+  )
+}
+
+export default DocsNavigationDesktop

src/components/DocsNavigation/DocsPickerDesktop.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react"
+import { isMatchedPath } from "../Header/Nav/isMatchedPath"
+import { getNavigationProps } from "../Header/getNavigationProps"
+import styles from "./docsPickerDesktop.module.css"
+import { clsx } from "../Header/Nav/utils"
+
+function DocsPickerDesktop({ pathname }: { pathname: string }) {
+  const [productMenuOpen, setProductMenuOpen] = useState(false)
+  const { subProductsNav } = getNavigationProps(pathname)
+  const subProductTrigger = subProductsNav?.find(({ href }) => isMatchedPath(pathname, href))
+
+  const label = subProductTrigger?.label || "Resources"
+  const icon = subProductTrigger?.label ? subProductTrigger.icon : undefined
+
+  return (
+    <div
+      className={styles.container}
+      onMouseEnter={() => setProductMenuOpen(true)}
+      onMouseLeave={() => setProductMenuOpen(false)}
+    >
+      <img src={icon} alt="" className={styles.logo} /> {label}
+      <div className={styles.caret}>
+        <span></span>
+      </div>
+      {productMenuOpen && (
+        <div className={styles.menu}>
+          <ul>
+            {subProductsNav
+              .filter((item) => !item.hideFromDropdown)
+              .map((item) => (
+                <li className={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

src/components/DocsNavigation/docsNavigationDesktop.module.css

@@ -0,0 +1,49 @@
+.nav {
+  position: sticky;
+  display: none;
+  top: var(--space-16x);
+  background-color: var(--gray-100);
+  height: var(--space-16x);
+  box-shadow: var(--space-0x) var(--space-1x) var(--space-3x) var(--space-0x) #0000000f;
+  z-index: 9;
+  transition: top 0.5s ease;
+}
+
+.hidden {
+  top: 0 !important;
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: auto;
+  max-width: min(calc(1440px - 2 * var(--space-16x)), calc(100% - 2 * var(--space-16x)));
+}
+
+.links {
+  display: flex;
+  gap: var(--space-4x);
+}
+
+.link {
+  transition: color 0.2s ease;
+  font-size: var(--space-4x);
+  color: var(--gray-600);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--space-0x) var(--space-0x) var(--space-0x) var(--space-2x);
+  gap: var(--space-2x);
+  font-weight: var(--font-weight-medium);
+}
+
+.link:hover {
+  color: var(--blue-600);
+}
+
+@media screen and (min-width: 992px) {
+  .nav {
+    display: block;
+  }
+}

src/components/DocsNavigation/docsPickerDesktop.module.css

@@ -0,0 +1,94 @@
+.container {
+  display: flex;
+  align-items: center;
+  padding: var(--space-3x) var(--space-4x);
+  padding-right: var(--space-16x);
+  gap: var(--space-3x);
+  isolation: isolate;
+  z-index: 100;
+  position: relative;
+  color: var(--blue-800);
+  flex: none;
+  font-size: 18px;
+  font-weight: var(--font-weight-medium);
+  order: 0;
+  flex-grow: 0;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  width: 235px;
+}
+
+.logo {
+  width: var(--space-8x);
+  height: var(--space-8x);
+}
+
+.caret {
+  width: var(--space-4x);
+  height: var(--space-4x);
+  border-radius: 50%;
+  position: absolute;
+  right: var(--space-4x);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.caret span {
+  width: var(--space-2x);
+  height: var(--space-2x);
+  border-right: 2px solid var(--gray-600);
+  border-bottom: 2px solid var(--gray-600);
+  transform: rotate(45deg);
+  transition: transform 0.2s ease;
+  margin-bottom: 1px;
+}
+
+.container:hover {
+  border-color: var(--blue-300);
+}
+
+.container:hover .caret span {
+  transform: rotate(-135deg);
+  margin-bottom: -1px;
+}
+
+.menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  background: #ffffff;
+  border: 1px solid var(--blue-200);
+  border-radius: var(--space-2x);
+  box-shadow: var(--space-0x) var(--space-1x) var(--space-2x) rgba(0, 0, 0, 0.1);
+  z-index: 100;
+  transition: all 0.2s ease;
+  padding: var(--space-2x) var(--space-3x);
+}
+
+.icon {
+  width: var(--space-5x);
+  height: var(--space-5x);
+}
+
+.menu ul {
+  list-style: none;
+  padding: var(--space-2x);
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  font-size: var(--space-4x);
+  color: var(--blue-800);
+  padding: var(--space-3x) var(--space-2x);
+  gap: var(--space-2x);
+}
+
+.link:hover {
+  color: var(--blue-600);
+}

src/components/DocsNavigation/index.tsx

@@ -0,0 +1,11 @@
+import DocsNavigationDesktop from "./DocsNavigationDesktop"
+
+function DocsNavigation({ pathname }: { pathname: string }) {
+  return (
+    <>
+      <DocsNavigationDesktop pathname={pathname} />
+    </>
+  )
+}
+
+export default DocsNavigation

src/components/Header/Nav/QuickLinksModal.tsx

@@ -0,0 +1,26 @@
+import ProductChainTable from "~/components/QuickLinks/sections/ProductChainTable"
+import styles from "./navBar.module.css"
+
+function QuickLinksModal({ toggleModal }: { toggleModal: () => void }) {
+  return (
+    <div className={styles.modalOverlay} onClick={toggleModal}>
+      <div className={styles.modalContentWrapper} onClick={(e) => e.stopPropagation()}>
+        <button className={styles.closeButton} onClick={toggleModal}>
+          &times;
+        </button>
+        <div className={styles.modalContent}>
+          <h2 className={styles.modalTitle}>
+            Quick links for <span>Builders</span>
+          </h2>
+          <p className={styles.modalDescription}>
+            Find all the supported networks at a glance, and the network-specific information you need to build your
+            project.
+          </p>
+          <ProductChainTable />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default QuickLinksModal

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

@@ -309,6 +309,14 @@
   .modalContentWrapper {
     width: 80%;
   }
+
+  .button {
+    display: none;
+  }
+
+  .quickLinksWrapper {
+    display: none;
+  }
 }
 
 /* For fixing the layout shifts caused by the search widget */

src/components/LeftSidebar/LeftSidebar.astro

@@ -1,9 +1,8 @@
 ---
 import { Sections } from "~/content/config"
-import { SIDEBAR, MENU, SectionContent } from "../../config"
+import { SIDEBAR, SectionContent } from "../../config"
 import { flattenChildren } from "../../scripts/flatten-children"
 import ActiveIcon from "./ActiveIcon.astro"
-import DocsPicker from "../DocsSwitcher/DocsPicker"
 export type Props = {
   currentPage: string
   section?: Sections
@@ -56,7 +55,6 @@ const isCurrentPageMatch = (sectionUrl: string, currentPage: string): boolean =>
 
 <nav aria-labelledby="grid-left">
   <div class="nav-groups" data-sticky>
-    <DocsPicker client:load pathname={Astro.url.pathname} />
     <ul>
       {
         sidebarSections.map((s: { parentSection: Sections; contents: SectionContent[]; section: Sections }) => (

src/layouts/DocsLayout.astro

@@ -8,6 +8,7 @@ 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"
 
 interface Props {
   frontmatter: BaseFrontmatter
@@ -44,6 +45,7 @@ const includeLinkToWalletScript = !!Astro.props.frontmatter.metadata?.linkToWall
 
 <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">