Revert "Added scroll based menu highlight feature (#1085)" (#1093)

This reverts commit 23c94ef.

Author: bluebill1049

src/components/Menu/Menu.tsx

@@ -1,50 +1,13 @@
-import { useEffect, useState } from "react"
 import Link from "next/link"
+import colors from "../../styles/colors"
 import styles from "./SideMenu.module.css"
 import typographyStyles from "../../styles/typography.module.css"
-import colors from "../../styles/colors"
+import { useRouter } from "next/router"
 import { Pages } from "../../types/types"
 
 function Menu({ pages = [] }: { pages: Pages }) {
-  const [activeSection, setActiveSection] = useState<string>("")
-
-  useEffect(() => {
-    const handleScroll = () => {
-      const sections = pages.flatMap((page) =>
-        [page, ...(page.pages || [])].map((p) => ({
-          id: p.pathname.replace("#", ""),
-          top:
-            document.getElementById(p.pathname.replace("#", ""))?.offsetTop ||
-            0,
-        }))
-      )
-
-      const currentSection = sections.reduce((acc, section) => {
-        const { id, top } = section
-        if (window.scrollY >= top - 100) {
-          console.log(id)
-          return id
-        }
-        return acc
-      }, "")
-
-      setActiveSection(currentSection)
-    }
-
-    window.addEventListener("scroll", handleScroll)
-
-    handleScroll()
-
-    return () => window.removeEventListener("scroll", handleScroll)
-  }, [pages])
-
-  const scrollToSection = (sectionId: string, event: React.MouseEvent) => {
-    event.preventDefault()
-    const element = document.getElementById(sectionId.replace("#", ""))
-    if (element) {
-      element.scrollIntoView({ behavior: "smooth" })
-    }
-  }
+  const router = useRouter()
+  const { asPath: pathname } = router
 
   return (
     <aside className={styles.menu}>
@@ -63,57 +26,41 @@ function Menu({ pages = [] }: { pages: Pages }) {
 
         <ul className="scrollArea">
           {pages.map((page) => {
-            const isActive = activeSection === page.pathname.replace("#", "")
-            const hasActiveChild = page.pages?.some(
-              (subPage) => activeSection === subPage.pathname.replace("#", "")
-            )
+            const isActive = pathname === page.pathname
 
             return (
               <li
                 key={page.pathname}
-                className={`${styles.menuItem} ${
-                  isActive || hasActiveChild ? styles.activeParent : ""
-                }`}
+                className={styles.menuItem}
                 style={{
                   display: page?.pages ? "block" : "flex",
                 }}
               >
-                <code aria-hidden className={styles.code}>
-                  {`</>`}
-                </code>
-                <a
-                  href={page.pathname}
+                <code aria-hidden className={styles.code}>{`</>`}</code>
+                <Link
                   className={isActive ? styles.isActive : ""}
-                  onClick={(e) => scrollToSection(page.pathname, e)}
+                  href={page.pathname}
                 >
                   {page.name}
-                </a>
+                </Link>
 
                 {page?.pages && (
                   <ul>
-                    {page.pages.map((subPage) => {
-                      const isSubActive =
-                        activeSection === subPage.pathname.replace("#", "")
+                    {page.pages.map((page) => {
+                      const isActive = pathname === page.pathname
 
                       return (
-                        <li
-                          key={subPage.pathname}
-                          className={`${styles.menuItem} ${
-                            isSubActive ? styles.activeItem : ""
-                          }`}
-                        >
-                          <code aria-hidden className={styles.code}>
-                            {`</>`}
-                          </code>
-                          <a
-                            href={subPage.pathname}
-                            className={isSubActive ? styles.isActive : ""}
-                            onClick={(e) =>
-                              scrollToSection(subPage.pathname, e)
-                            }
+                        <li key={page.pathname} className={styles.menuItem}>
+                          <code
+                            aria-hidden
+                            className={styles.code}
+                          >{`</>`}</code>{" "}
+                          <Link
+                            className={isActive ? styles.isActive : ""}
+                            href={page.pathname}
                           >
-                            {subPage.name}
-                          </a>
+                            {page.name}
+                          </Link>
                         </li>
                       )
                     })}