package-lock.json

@@ -36,6 +36,7 @@
         "react-dom": "^19.0.0",
         "react-hook-form": "^7.54.2",
         "react-leaflet": "^5.0.0-rc.2",
+        "react-scrollspy-navigation": "^2.0.6",
         "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7",
         "zod": "^3.24.1"
@@ -9808,6 +9809,22 @@
         }
       }
     },
+    "node_modules/react-scrollspy-navigation": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/react-scrollspy-navigation/-/react-scrollspy-navigation-2.0.6.tgz",
+      "integrity": "sha512-BBnIEI9BsCPIMnp3z/OIEJ6mRSlDgGYf8wty5IjR8nOIhIeRhQp6eDUAKFMyHRoM2RUInA2NDu5DutIFTphoKQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/toviszsolt"
+        },
+        {
+          "type": "paypal",
+          "url": "https://www.paypal.com/paypalme/toviszsolt"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",

package.json

@@ -37,6 +37,7 @@
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
     "react-leaflet": "^5.0.0-rc.2",
+    "react-scrollspy-navigation": "^2.0.6",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.24.1"

src/components/mobile-nav.tsx

@@ -2,10 +2,9 @@
 
 import { Button } from "@/components/ui/button"
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
-import { useColorSections } from "@/hooks/color-sections"
 import type { Sections, translations } from "@/i18n/translations"
 import { Menu } from "lucide-react"
-import { useRef } from "react"
+import ScrollSpy from "react-scrollspy-navigation"
 import { LanguageSelector } from "./ui/language-selector"
 
 function NavContent({
@@ -15,15 +14,16 @@ function NavContent({
   t: typeof translations.pl,
   linksOrder: Array<Sections>
 }) {
-  const parent = useRef<HTMLDivElement>(null);
-  useColorSections(parent);
   return (
-    <nav className="flex flex-col gap-4 mt-8" ref={parent}>
-      {linksOrder.map((value) => (
-        <a key={value} href={`#${value}`} className="text-lg hover:text-primary transition-colors">
-          {t.nav[value]}
-        </a>
-      ))}
+    <nav className="flex flex-col gap-4 mt-8">
+      <ScrollSpy activeClass="nav-active">
+
+        {linksOrder.map((value) => (
+          <a key={value} href={`#${value}`} className="text-lg hover:text-primary transition-colors">
+            {t.nav[value]}
+          </a>
+        ))}
+      </ScrollSpy>
       <LanguageSelector />
     </nav>
   )

src/components/nav.tsx

@@ -1,11 +1,11 @@
 "use client"
-import { useColorSections } from "@/hooks/color-sections"
 import { type translations } from "@/i18n/translations"
 import { cn } from "@/lib/utils"
-import { useRef } from "react"
+import ScrollSpy from 'react-scrollspy-navigation'
 import { MobileNav } from "./mobile-nav"
 import { NavContainer } from "./nav-container"
 
+
 const linksOrder: Array<keyof (typeof translations.pl)["nav"]> = [
   'about',
   'tickets',
@@ -19,25 +19,25 @@ export function MainpageNav({
 }: {
   t: typeof translations.pl
 }) {
-  const parent = useRef<HTMLDivElement>(null);
-  useColorSections(parent);
 
   return (
     <NavContainer title={t.nav.title}>
       <>
-        <div className="hidden md:flex md:items-center md:gap-4 lg:gap-8" ref={parent}>
+        <div className="hidden md:flex md:items-center md:gap-4 lg:gap-8">
+          <ScrollSpy activeClass="nav-active">
 
-          {linksOrder.map((value) => (
-            <a
-              key={value}
-              href={`#${value}`}
-              className="text-sm md:text-md hover:text-primary transition-colors relative group will-change-[color]"
-            >
-              {t.nav[value]}
-              <span data-sub={value} className={cn("absolute inset-x-0 -bottom-1 h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform will-change-transform", {
-              })} />
-            </a>
-          ))}
+            {linksOrder.map((value) => (
+              <a
+                key={value}
+                href={`#${value}`}
+                className="text-sm md:text-md hover:text-primary transition-colors relative group will-change-[color]"
+              >
+                {t.nav[value]}
+                <span data-sub={value} className={cn("absolute inset-x-0 -bottom-1 h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform will-change-transform", {
+                })} />
+              </a>
+            ))}
+          </ScrollSpy>
         </div>
         <div className="md:hidden ml-2">
           <MobileNav t={t} linksOrder={linksOrder} />

src/globals.css

@@ -159,3 +159,11 @@
 section {
   scroll-margin-top: calc(var(--spacing) * 16 + var(--spacing) * 4);
 }
+
+.nav-active {
+  color: var(--color-primary) !important;
+  & span {
+    --tw-scale-x: 100%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+}

src/hooks/color-sections.tsx

@@ -1,72 +0,0 @@
-import { Sections } from "@/i18n/translations";
-import { useLayoutEffect, useRef } from "react";
-
-export const linksOrder: Array<Sections> = [
-  "about",
-  "tickets",
-  "cfp",
-  "details",
-  "contact"
-]
-
-export function useColorSections(parent: React.RefObject<HTMLDivElement | null>) {
-  const previous = useRef<Sections>(linksOrder[0])
-
-  useLayoutEffect(() => {
-    if (parent.current === null) return;
-
-    const options = {
-      root: null,
-      rootMargin: "-10px",
-      threshold: 0.5, // Adjust the visibility threshold as needed
-    };
-
-
-    const sections = linksOrder.map(value => document.getElementById(value));
-    const subs = linksOrder.reduce((acc, value) => {
-      acc[value] = parent.current!.querySelector('[data-sub="' + value + '"]')!;
-      return acc;
-    }, {} as Record<Sections, HTMLAnchorElement>);
-    const links = linksOrder.reduce((acc, value) => {
-      acc[value] = parent.current!.querySelector('[href="#' + value + '"]')!;
-      return acc;
-    }, {} as Record<Sections, HTMLAnchorElement>);
-
-    console.log(links)
-
-    const observer = new IntersectionObserver((entries) => {
-
-      for (const entry of entries) {
-        const target = entry.target.id as Sections
-        if (entry.isIntersecting) {
-          // FIXME: This seems to be VERY broken on firefox.
-          // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1250972
-          // It basically spikes up CPU usage to some enormous values just to update the hash, like WTF firefox.
-          // if (history.replaceState) {
-          //   timeout = setTimeout(() => {
-          //     history.replaceState(null, "", `#${target}`)
-          //   }, 150)
-          // }
-          subs[previous.current]?.classList.remove('scale-x-100');
-          links[previous.current]?.classList.remove('text-primary');
-          previous.current = target;
-
-          subs[previous.current]?.classList.add('scale-x-100');
-          links[previous.current]?.classList.add('text-primary');
-          break;
-        }
-      }
-    }, options);
-
-    sections.forEach(section => {
-      if (section) {
-        observer.observe(section);
-      }
-    });
-
-    return () => {
-      observer.disconnect()
-    };
-  }, [parent]);
-
-}