feat: DC-4631 Add new dropdown to toc section

src/components/Icon.tsx

@@ -2,15 +2,16 @@ import clsx from "clsx";
 import React, { useEffect, useRef, useState } from "react";
 
 interface IconProps {
-  icon: string;
+  icon?: string;
+  customicon?: any;
   color?: string;
   className?: string;
   size?: string;
   btn?: "left" | "right";
   fit?: "width" | "height";
 }
 
-export const Icon = ({ icon, color, className, size, btn, fit }: IconProps) => {
+export const Icon = ({ customicon, icon, color, className, size, btn, fit }: IconProps) => {
   const iconRef = useRef<any>(null);
   const [font, setFontSize] = useState<number>(0);
   const [measure, setMeasure] = useState<string>("vw");
@@ -34,8 +35,15 @@ export const Icon = ({ icon, color, className, size, btn, fit }: IconProps) => {
     window.addEventListener("resize", setFont);
     return () => window.removeEventListener("resize", setFont);
   }, []);
+
   return (
-    <i
+    customicon ? <span 
+      style={{
+        textAlign: "center",
+        fontSize: size ? size : `${font}${measure}`,
+        color: color ? color : "currentcolor",
+        margin: btn?.length ? (btn === "right" ? "0 0 0 8px" : "0 8px 0 0") : "",
+      }}>{customicon}</span> : <i
       ref={iconRef}
       className={clsx(icon, className)}
       style={{

src/components/content-dropdown/index.tsx

@@ -0,0 +1,83 @@
+import useComponentVisible from "@site/src/utils/useComponentVisible";
+import clsx from "clsx";
+import { useEffect, useState } from "react";
+
+import { Icon } from "../Icon";
+import styles from "./styles.module.scss";
+
+type DropdownType = {
+  items: Array<React.ReactNode>;
+  anchorText: string;
+  dark?: boolean;
+  rightClick?: boolean;
+  pos?: "top" | "bottom";
+};
+const Dropdown = ({
+  anchorText,
+  items,
+  dark = false,
+  rightClick = false,
+  pos = "bottom",
+}: DropdownType) => {
+  const [isOpen, openDrop] = useState<boolean>(false);
+  const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(true);
+
+  useEffect(() => {
+    if (!isComponentVisible) openDrop(false);
+  }, [isComponentVisible]);
+
+  const escEvent = (e: KeyboardEvent) => {
+    if (e.key === "Escape") openDrop(false);
+  };
+
+  useEffect(() => {
+    window.addEventListener("keydown", escEvent);
+    return () => window.removeEventListener("keydown", escEvent);
+  }, []);
+
+  return (
+    <div
+      className={clsx(styles.root)}
+      ref={ref}
+      onClick={() => {
+        if (!rightClick) {
+          setIsComponentVisible(true);
+          openDrop(!isOpen);
+        }
+      }}
+      onContextMenu={(e) => {
+        if (rightClick && window.innerWidth > 940) {
+          e.preventDefault();
+          setIsComponentVisible(true);
+          openDrop(true);
+        }
+      }}
+    >
+      <div className={clsx(styles.anchor, isOpen && styles.active)}>
+        <Icon icon="fa-regular fa-arrow-up-right" size="inherit" btn="left"/>
+        {anchorText}
+        <Icon icon="fa-regular fa-chevron-down" size="inherit" btn="right"/>
+      </div>
+      <div
+        className={clsx(
+          styles.overlayWrapper,
+          isOpen && styles.showOverlay
+        )}
+        onClick={(e: any) => {
+          e.stopPropagation();
+          openDrop(false);
+        }}
+      >
+        <div className={clsx(pos === "top" && styles.topPos, styles.container)}>
+          {items.map((item: any, idx: number) => (
+            <div key={idx} className={styles.item}>
+              {item}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dropdown;

src/components/content-dropdown/styles.module.scss

@@ -0,0 +1,104 @@
+$border-color: #2d3748;
+
+.root {
+  color: var(--primary-font-color);
+  font-family: var(--font-family-body, Inter);
+  font-size: var(--font-size-xs, 14px);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%; /* 19.6px */
+  width: fit-content;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.anchor {
+  border-radius: 8px;
+  padding: 4px 8px;
+  cursor: pointer;
+  width: fit-content;
+  border: 1px solid var(--disabled-font-color);
+  background: var(--surface-primary);
+  &.active {
+    background: var(--surface-brand-grey);
+  }
+}
+
+.overlayWrapper {
+  opacity: 0;
+  pointer-events: none;
+  @media (max-width: 599px) {
+    position: fixed;
+    height: 100vh;
+    z-index: 102;
+    width: 100vw;
+    background: rgb(9, 10, 21, 0.75);
+    top: 0;
+    left: 0;
+  }
+  .container {
+    transform: translateY(-8px);
+  }
+  &.showOverlay {
+    .container {
+      transform: translateY(0);
+    }
+  }
+}
+
+.showOverlay {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.container {
+  background: var(--surface-primary);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
+  border-radius: 8px;
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+  overflow: hidden;
+  right: 0;
+  transition: transform 300ms ease;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  @media (min-width: 600px) {
+    top: 100%;
+    margin-top: 16px;
+    bottom: unset;
+    width: auto;
+  }
+}
+
+.item {
+  color: var(--primary-font-color);
+  width: max-content;
+  min-width: 100%;
+  cursor: pointer;
+  padding: 6px 12px;
+  background: var(--surface-primary);
+  transition: background 300ms ease-out;
+  &:hover {
+    background: var(--surface-brand-grey-strong);
+  }
+}
+
+.topPos {
+  @media (min-width: 600px) {
+    top: unset !important;
+    left: 0 !important;
+    transform: unset !important;
+    bottom: 100% !important;
+  }
+  & > * {
+    width: 100%;
+    display: inline-block;
+  }
+
+  a {
+    color: inherit;
+  }
+}

src/css/all.css

@@ -844,6 +844,14 @@
   content: "\f09b";
 }
 
+.fa-markdown::before {
+  content: "\f60f";
+}
+
+.fa-openai::before {
+  content: "\e7cf";
+}
+
 .fa-globe::before {
   content: "\f0ac";
 }

src/css/theming.css

@@ -69,11 +69,11 @@
   --surface-brand-light: #d9f9f6;
   --primary-font-color: var(--gray-800);
   --surface-primary: #ffffff;
+  --disabled-font-color: #CBD5E0;
   --navbar-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
   --navbar-gradient: linear-gradient(180deg, #fff, transparent);
   --navbar-items-bg: #ffffffcc;
   --surface-secondary: #2d3748;
-  --surface-primary: #fff;
   --secondary-font-color: #4a5568;
   --tertiary-font-color: #718096;
   --ifm-dropdown-background-color: #fff;
@@ -222,6 +222,7 @@ html[data-theme="dark"] {
   --ifm-tabs-bg-color-active: #2d3748;
   --main-font-color: #e2e8f0;
   --primary-font-color: rgb(247, 250, 252);
+  --disabled-font-color: #4A5568;
   --surface-primary: var(--gray-1000);
   --navbar-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.5);
   --navbar-gradient: linear-gradient(180deg, #090a15, rgba(9, 10, 21, 0));
@@ -363,6 +364,7 @@ html[data-theme="dark"] {
     --navbar-items-bg: #ffffffcc;
     --surface-secondary: #2d3748;
     --surface-primary: #ffffff;
+    --disabled-font-color: #CBD5E0;
     --icon-wrapper-bg: rgb(5, 7, 10);
     --icon-svg-color: #5a67d8;
     --teal-link-color: #16a394;
@@ -493,6 +495,7 @@ html[data-theme="dark"] {
     --ifm-tabs-bg-color-active: #2d3748;
     --main-font-color: #e2e8f0;
     --primary-font-color: rgb(247, 250, 252);
+    --disabled-font-color: #4A5568;
     --surface-primary: var(--gray-1000);
     --navbar-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.5);
     --navbar-gradient: linear-gradient(180deg, #090a15, rgba(9, 10, 21, 0));

src/theme/DocBreadcrumbs/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import clsx from "clsx";
 import { ThemeClassNames } from "@docusaurus/theme-common";
 import { useHomePageRoute } from "@docusaurus/theme-common/internal";

src/theme/DocItem/Layout/index.tsx

@@ -0,0 +1,69 @@
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {useWindowSize} from '@docusaurus/theme-common';
+import {useDoc} from '@docusaurus/plugin-content-docs/client';
+import DocItemPaginator from '@theme/DocItem/Paginator';
+import DocVersionBanner from '@theme/DocVersionBanner';
+import DocVersionBadge from '@theme/DocVersionBadge';
+import DocItemFooter from '@theme/DocItem/Footer';
+import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
+import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
+import DocItemContent from '@theme/DocItem/Content';
+import DocBreadcrumbs from '@theme/DocBreadcrumbs';
+import ContentVisibility from '@theme/ContentVisibility';
+import type {Props} from '@theme/DocItem/Layout';
+
+import styles from './styles.module.css';
+
+/**
+ * Decide if the toc should be rendered, on mobile or desktop viewports
+ */
+function useDocTOC() {
+  const {frontMatter, toc} = useDoc();
+  const windowSize = useWindowSize();
+
+  const hidden = frontMatter.hide_table_of_contents;
+  const canRender = !hidden && toc.length > 0;
+
+  const mobile = canRender ? <DocItemTOCMobile /> : undefined;
+
+  const desktop =
+    canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
+      <DocItemTOCDesktop />
+    ) : undefined;
+
+  return {
+    hidden,
+    mobile,
+    desktop,
+  };
+}
+
+export default function DocItemLayout({children}: Props): ReactNode {
+  const docTOC = useDocTOC();
+  const {metadata} = useDoc();
+  return (
+    <div className="row">
+      <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
+        <ContentVisibility metadata={metadata} />
+        <DocVersionBanner />
+        <div className={styles.docItemContainer}>
+          <article>
+            <DocBreadcrumbs />
+            <DocVersionBadge />
+            {docTOC.mobile}
+            <DocItemContent>{children}</DocItemContent>
+            <DocItemFooter />
+          </article>
+          <DocItemPaginator />
+        </div>
+      </div>
+      {docTOC.desktop && <div className="col col--3">
+        {React.cloneElement(docTOC.desktop as React.ReactElement, {
+          //@ts-ignore
+          metadata,
+        })}
+      </div>}
+    </div>
+  );
+}

src/theme/DocItem/Layout/styles.module.css

@@ -0,0 +1,10 @@
+.docItemContainer header + *,
+.docItemContainer article > *:first-child {
+  margin-top: 0;
+}
+
+@media (min-width: 997px) {
+  .docItemCol {
+    max-width: 75% !important;
+  }
+}

src/theme/DocItem/TOC/Desktop/index.tsx

@@ -0,0 +1,17 @@
+import React, {type ReactNode} from 'react';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useDoc} from '@docusaurus/plugin-content-docs/client';
+import TOC from '@site/src/theme/TOC';
+
+export default function DocItemTOCDesktop({metadata}: any): ReactNode {
+  const {toc, frontMatter} = useDoc();
+  return (
+    <TOC
+      toc={toc}
+      minHeadingLevel={frontMatter.toc_min_heading_level}
+      maxHeadingLevel={frontMatter.toc_max_heading_level}
+      className={ThemeClassNames.docs.docTocDesktop}
+      metadata={metadata}
+    />
+  );
+}