Quick links for Builders

src/components/HeadCommon.astro

@@ -15,7 +15,7 @@ const { title } = Astro.props
 
 <!-- Global Metadata -->
 <meta charset="utf-8" />
-<meta name="viewport" content="width=device-width" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
 
 <link
   href="https://assets-global.website-files.com/5f6b7190899f41fb70882d08/5fa97474da20bc75f63bfdc4_Chainlink-favicon-32.png"

src/components/Header/Nav/NavBar.tsx

@@ -1,11 +1,15 @@
-import React from "react"
+import React, { useEffect, useRef, useState } from "react"
 import { ProductsNav, SubProductsNav } from "./config"
 import styles from "./navBar.module.css"
 import { clsx } from "./utils"
 import { useScrollDirection } from "./useScrollDirection"
 import { useScrollPosition } from "./useScrollPosition"
 import { ProductNavigation } from "./ProductNavigation/ProductNavigation"
 import { useHideHeader } from "./useHideHeader"
+import ProductChainTable from "../../QuickLinks/sections/ProductChainTable"
+import QuickLinksIcon from "../../QuickLinks/assets/quick-links-icon.svg"
+
+declare const Weglot: any
 
 export type SearchTrigger = React.ReactNode
 
@@ -20,7 +24,9 @@ export type NavBarProps = {
 export const navBarHeight = 64
 
 export const NavBar = ({ path, searchTrigger, onHideChange, productsNav, subProductsNav }: NavBarProps) => {
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false)
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const navRef = useRef<HTMLElement | null>(null)
 
   const scrollDirection = useScrollDirection()
   const { isAtTopOfPage, isAtBottomOfPage } = useScrollPosition(navBarHeight)
@@ -32,9 +38,48 @@ export const NavBar = ({ path, searchTrigger, onHideChange, productsNav, subProd
     isAtBottomOfPage,
   })
 
+  const toggleModal = () => {
+    setIsModalOpen(!isModalOpen)
+  }
+
+  useEffect(() => {
+    if (
+      !window.location.hostname.includes("localhost") &&
+      !window.location.hostname.includes("documentation-private-git-")
+    ) {
+      const script = document.createElement("script")
+      script.src = "https://cdn.weglot.com/weglot.min.js"
+      script.async = true
+      script.onload = () => {
+        Weglot.initialize({
+          api_key: "wg_bc56a95905bfa8990f449554339e82be8",
+          switchers: [
+            {
+              button_style: {
+                full_name: false,
+                with_name: true,
+                is_dropdown: true,
+                with_flags: false,
+              },
+              location: {
+                target: "#weglot",
+                sibling: null,
+              },
+            },
+          ],
+        })
+      }
+      document.body.appendChild(script)
+
+      return () => {
+        document.body.removeChild(script)
+      }
+    }
+  }, [])
+
   return (
     <>
-      <header className={styles.header}>
+      <header className={styles.header} ref={navRef}>
         <div className={clsx(styles.navBar, shouldHideHeader && styles.headerHidden)}>
           <div className={styles.container}>
             <div className={styles.leftSection}>
@@ -48,7 +93,20 @@ export const NavBar = ({ path, searchTrigger, onHideChange, productsNav, subProd
             </div>
             <div className={styles.rightSection}>
               {searchTrigger && <div className={styles.searchTrigger}>{searchTrigger}</div>}
-              <div id="weglot" />
+              <div id="weglot" className={styles.weglotContainer} />
+              <div className={styles.quickLinksWrapper}>
+                <button className={styles.quickLinksButton} onClick={toggleModal}>
+                  <img src={QuickLinksIcon.src} className={styles.quickLinksIcon} alt="Quick Links" />
+                </button>
+                <span className={styles.quickLinksTooltip}>
+                  <img
+                    src="https://smartcontract.imgix.net/icons/info.svg?auto=compress%2Cformat"
+                    className={styles.infoIcon}
+                    alt="Info"
+                  />
+                  Quick links for Builders
+                </span>
+              </div>
               <a
                 rel="noreferrer noopener"
                 target="_blank"
@@ -62,6 +120,26 @@ export const NavBar = ({ path, searchTrigger, onHideChange, productsNav, subProd
         </div>
       </header>
       <div className={styles.headerPlaceholder} />
+
+      {isModalOpen && (
+        <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>
+      )}
     </>
   )
 }

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

@@ -2,6 +2,7 @@
   position: absolute;
   z-index: 10;
   top: 0;
+  width: 100%;
 }
 
 .navBar {
@@ -21,6 +22,8 @@
   justify-content: space-between;
   padding-block: var(--space-4x);
   height: var(--space-16x);
+  /* max-width: var(--fullwidth-max-width);
+  margin: 0 auto; */
   gap: var(--space-3x);
 }
 
@@ -93,6 +96,7 @@
   color: var(--color-text-primary) !important;
   padding-right: 24px !important;
 }
+
 :global(.country-selector .wgcurrent:hover a),
 :global(.country-selector :not(.wgcurrent) a:hover) {
   color: var(--color-text-link) !important;
@@ -114,6 +118,141 @@
   transform: rotate(-180deg) !important;
 }
 
+.weglotContainer {
+  margin-right: var(--space-2x);
+  display: flex;
+  align-items: center;
+}
+
+.quickLinksWrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.quickLinksButton {
+  display: inline;
+  background: none;
+  border: var(--border-width-primary) solid transparent;
+  cursor: pointer;
+  border-radius: var(--border-radius-primary);
+  padding: var(--space-1x);
+  transition: background-color 300ms ease-out, border 300ms ease-out, border-radius 300ms ease-out;
+}
+
+.quickLinksButton:hover {
+  border: var(--border-width-primary) solid var(--blue-200);
+  background: var(--background-color-background-primary);
+}
+
+.quickLinksIcon {
+  width: 24px;
+  height: 24px;
+  margin-top: 3px;
+  transition: filter 0.3s ease;
+}
+
+.quickLinksButton:hover .quickLinksIcon {
+  filter: none;
+}
+
+.quickLinksTooltip {
+  visibility: hidden;
+  background-color: var(--blue-600);
+  color: white;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 10px;
+  position: absolute;
+  z-index: 1;
+  top: 125%;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  transition: opacity 0.3s;
+  min-width: 130px;
+  display: none;
+  align-items: center;
+  gap: 5px;
+}
+
+.quickLinksWrapper:hover .quickLinksTooltip {
+  visibility: visible;
+  opacity: 1;
+}
+
+.infoIcon {
+  width: 14px;
+  height: 14px;
+  margin-right: 1px;
+}
+
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+}
+
+.modalContentWrapper {
+  position: relative;
+  background-color: #fff;
+  padding: 4em 1em;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  width: 90%;
+  max-height: 90%;
+  display: flex;
+  flex-direction: column;
+}
+
+.modalContent {
+  overflow-y: auto;
+  flex-grow: 1;
+}
+
+.modalTitle {
+  text-align: center;
+  font-weight: 600;
+  font-size: 2rem;
+  line-height: 2.5rem;
+}
+
+.modalTitle span {
+  font-weight: 600;
+  font-size: inherit;
+  line-height: inherit;
+  color: var(--blue-600);
+}
+
+.modalDescription {
+  margin-bottom: 1em;
+  font-size: 1rem;
+  line-height: 1.5;
+  max-width: 100%;
+  text-align: center;
+}
+
+.closeButton {
+  position: absolute;
+  top: 10px;
+  right: 20px;
+  background: none;
+  border: none;
+  font-size: 2em;
+  cursor: pointer;
+  color: var(--gray-600);
+}
+
+.closeButton:hover {
+  color: var(--blue-600);
+}
+
 @media screen and (min-width: 768px) {
   :is(.button) {
     display: flex;
@@ -149,4 +288,17 @@
   .rightSection {
     flex-direction: row;
   }
+
+  .quickLinksTooltip {
+    display: flex;
+  }
+}
+@media screen and (min-width: 1080px) {
+  .quickLinksButton {
+    display: inline;
+  }
+
+  .modalContentWrapper {
+    width: 80%;
+  }
 }