src/components/mobile-nav.tsx

@@ -2,42 +2,53 @@
 
 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 { cn } from "@/lib/utils"
 import { Menu } from "lucide-react"
+import { useRef } from "react"
 import { LanguageSelector } from "./ui/language-selector"
 
+function NavContent({
+  t,
+  linksOrder
+}: {
+  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>
+      ))}
+      <LanguageSelector />
+    </nav>
+  )
+}
+
 export function MobileNav({
   t,
   linksOrder,
-  activeSection
 }: {
   t: typeof translations.pl
   linksOrder: Array<Sections>
-  activeSection: Sections
 }) {
   return (
-    <Sheet>
+    <Sheet >
       <SheetTrigger asChild>
         <Button variant="ghost" size="icon" className="md:hidden">
           <Menu className="h-5 w-5" />
           <span className="sr-only">{t.mobileNav.toggleMenu}</span>
         </Button>
       </SheetTrigger>
-      <SheetContent side="right" className="w-[80vw] sm:w-[385px]">
+      <SheetContent side="right" className="w-[80vw] sm:w-[385px] z-max">
         <SheetHeader>
           <SheetTitle>{t.mobileNav.menu}</SheetTitle>
         </SheetHeader>
-        <nav className="flex flex-col gap-4 mt-8">
-          {linksOrder.map((value) => (
-            <a key={value} href={`#${value}`} className={cn("text-lg hover:text-primary transition-colors", {
-              'text-primary': activeSection === value
-            })}>
-              {t.nav[value]}
-            </a>
-          ))}
-          <LanguageSelector />
-        </nav>
+        <NavContent t={t} linksOrder={linksOrder} />
       </SheetContent>
     </Sheet>
   )

src/components/nav.tsx

@@ -1,9 +1,10 @@
 "use client"
 import { Button } from "@/components/ui/button"
-import { Sections, type translations } from "@/i18n/translations"
+import { useColorSections } from "@/hooks/color-sections"
+import { type translations } from "@/i18n/translations"
 import { cn } from "@/lib/utils"
 import { MoonIcon, SunIcon } from "lucide-react"
-import { useEffect, useState } from "react"
+import { useRef } from "react"
 import { MobileNav } from "./mobile-nav"
 import { useTheme } from "./providers"
 import { LanguageSelector } from "./ui/language-selector"
@@ -25,50 +26,8 @@ export function Nav({
   t: typeof translations.pl
 }) {
   const { theme, setTheme } = useTheme()
-  const [activeSection, setActiveSection] = useState<Sections>("about")
-
-
-  useEffect(() => {
-    const options = {
-      root: null,
-      rootMargin: "-10px",
-      threshold: 0.5, // Adjust the visibility threshold as needed
-    };
-    let timeout: NodeJS.Timeout | null = null;
-
-
-    const observer = new IntersectionObserver((entries) => {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-      entries.forEach(entry => {
-        const target = entry.target.id as keyof (typeof translations.pl)["nav"]
-        if (entry.isIntersecting) {
-          setActiveSection(target);
-          if (window.location.hash !== `#${target}` && history.replaceState) {
-            timeout = setTimeout(() => {
-              history.replaceState(null, "", `#${target}`)
-            }, 150)
-          }
-        }
-      });
-    }, options);
-
-    const sections = linksOrder.map(value => document.getElementById(value));
-    sections.forEach(section => {
-      if (section) {
-        observer.observe(section);
-      }
-    });
-
-    return () => {
-      sections.forEach(section => {
-        if (section) {
-          observer.unobserve(section);
-        }
-      });
-    };
-  }, []);
+  const parent = useRef<HTMLDivElement>(null);
+  useColorSections(parent);
 
   return (
     <nav className="fixed top-0 left-0 right-0 backdrop-blur-xs bg-background/40 border-b z-[10000]">
@@ -82,19 +41,16 @@ export function Nav({
           </div>
           <div className="flex items-center">
             {/* Desktop Navigation */}
-            <div className="hidden md:flex md:items-center md:gap-4 lg:gap-8">
+            <div className="hidden md:flex md:items-center md:gap-4 lg:gap-8" ref={parent}>
 
               {linksOrder.map((value) => (
                 <a
                   key={value}
                   href={`#${value}`}
-                  className={cn("text-sm md:text-md hover:text-primary transition-colors relative group", {
-                    'text-primary': activeSection === value
-                  })}
+                  className="text-sm md:text-md hover:text-primary transition-colors relative group will-change-[color]"
                 >
                   {t.nav[value]}
-                  <span className={cn("absolute inset-x-0 -bottom-1 h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform", {
-                    'scale-x-100': activeSection === 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>
               ))}
@@ -113,7 +69,7 @@ export function Nav({
 
             {/* Mobile Navigation */}
             <div className="md:hidden ml-2">
-              <MobileNav t={t} linksOrder={linksOrder} activeSection={activeSection} />
+              <MobileNav t={t} linksOrder={linksOrder} />
             </div>
           </div>
         </div>

src/hooks/color-sections.tsx

@@ -0,0 +1,75 @@
+import { Sections } from "@/i18n/translations";
+import { useLayoutEffect, useRef } from "react";
+
+export const linksOrder: Array<Sections> = [
+  "hero",
+  "about",
+  "where",
+  "when",
+  "tickets",
+  "accommodation",
+  "food",
+  "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]);
+
+}