update

website/src/components/FloatingNav.css

@@ -0,0 +1,30 @@
+.floating-nav {
+  position: fixed;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 10px;
+}
+
+.floating-nav ul {
+  list-style: none;
+  padding: 0;
+}
+
+.floating-nav ul li a {
+  display: block;
+  padding: 10px;
+  color: inherit;
+  text-decoration: none;
+}
+
+.floating-nav ul li.active a, .floating-nav ul li.active a:hover {
+  color: var(--ifm-color-success);
+}
+
+/* Hide if the screen size is small */
+@media screen and (max-width: 1440px) {
+  .floating-nav {
+    display: none;
+  }
+}

website/src/components/FloatingNav.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from "react";
+import "./FloatingNav.css";
+
+const FloatingNav = ({ sections }: { sections: string[] }) => {
+  const [activeSection, setActiveSection] = useState("");
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentSection = sections.find((section) => {
+        const element = document.getElementById(section);
+
+        return (
+          element &&
+          window.scrollY >= element.offsetTop - 50 &&
+          window.scrollY <= element.offsetTop + element.offsetHeight + 50
+        );
+      });
+      setActiveSection(currentSection);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <nav className="floating-nav">
+      <ul>
+        {sections.map((section) => (
+          <li
+            key={section}
+            className={activeSection === section ? "active" : ""}
+          >
+            <a
+              href={`#${section}`}
+              onClick={() => {
+                setTimeout(() => {
+                  console.log("clicked");
+                  setActiveSection(section);
+                }, 50); // wait for scroll to finish
+              }}
+            >
+              {section.toUpperCase()}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};
+
+export default FloatingNav;