fix: make it work with worse motions

src/components/nav.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { useColorSections } from "@/hooks/color-sections"
-import { type translations } from "@/i18n/translations"
+import { Sections, type translations } from "@/i18n/translations"
 import { cn } from "@/lib/utils"
 import { useRef } from "react"
 import { MobileNav } from "./mobile-nav"
@@ -20,7 +20,19 @@ export function MainpageNav({
   t: typeof translations.pl
 }) {
   const parent = useRef<HTMLDivElement>(null);
-  useColorSections(parent);
+  const previous = useRef<Sections>(linksOrder[0])
+  const forceIgnore = useRef<boolean>(false);
+  useColorSections(parent, previous, forceIgnore);
+
+  function setCurrentUnderline(id: typeof linksOrder[number]) {
+    forceIgnore.current = true;
+    previous.current = id;
+
+    document.querySelectorAll('[data-sub]').forEach(x => x.classList.remove('scale-x-100'));
+    document.querySelectorAll('[data-link]').forEach(x => x.classList.remove('text-primary'));
+    document.querySelector(`[data-sub="${id}"]`)?.classList.add('scale-x-100');
+    document.querySelector(`[data-link="${id}"]`)?.classList.add('text-primary');
+  }
 
   return (
     <NavContainer title={t.nav.title}>
@@ -31,7 +43,11 @@ export function MainpageNav({
             <a
               key={value}
               href={`#${value}`}
+              onClick={(e) => {
+                setCurrentUnderline(value)
+              }}
               className="text-sm md:text-md hover:text-primary transition-colors relative group will-change-[color]"
+              data-link={value}
             >
               {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", {

src/globals.css

@@ -142,9 +142,6 @@
   body {
     @apply bg-background text-foreground;
   }
-  html {
-    scroll-behavior: smooth;
-  }
 }
 
 .parallax-video {

src/hooks/color-sections.tsx

@@ -1,5 +1,5 @@
 import { Sections } from "@/i18n/translations";
-import { useLayoutEffect, useRef } from "react";
+import { useLayoutEffect } from "react";
 
 export const linksOrder: Array<Sections> = [
   "about",
@@ -16,10 +16,13 @@ export const linksOrder: Array<Sections> = [
  */
 const reversedLinks = linksOrder.toReversed();
 
-export function useColorSections(parent: React.RefObject<HTMLDivElement | null>) {
-  const previous = useRef<Sections>(linksOrder[0])
+export function useColorSections(parent: React.RefObject<HTMLDivElement | null>, previous: React.RefObject<typeof linksOrder[number]>, forceIgnore: React.MutableRefObject<boolean>) {
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
 
   useLayoutEffect(() => {
+    if (prefersReducedMotion.matches) {
+      return;
+    }
     if (parent.current === null) return;
 
     const options = {
@@ -34,7 +37,6 @@ export function useColorSections(parent: React.RefObject<HTMLDivElement | null>)
       acc[value] = parent.current!.querySelector('[data-sub="' + value + '"]')!;
       return acc;
     }, {} as Record<Sections, HTMLAnchorElement>);
-    console.log(subs);
     const links = linksOrder.reduce((acc, value) => {
       acc[value] = parent.current!.querySelector('[href="#' + value + '"]')!;
       return acc;
@@ -45,8 +47,12 @@ export function useColorSections(parent: React.RefObject<HTMLDivElement | null>)
     let intersecting: Set<string> = new Set;
 
     function setCurrentUnderline(id: typeof linksOrder[number]) {
-      subs[previous.current]?.classList.remove('scale-x-100');
-      links[previous.current]?.classList.remove('text-primary');
+      for (const sub of Object.values(subs)) {
+        sub.classList.remove('scale-x-100');
+      }
+      for (const link of Object.values(links)) {
+        link.classList.remove('text-primary');
+      }
       previous.current = id;
 
       subs[previous.current]?.classList.add('scale-x-100');
@@ -54,6 +60,12 @@ export function useColorSections(parent: React.RefObject<HTMLDivElement | null>)
     }
 
     const observer = new IntersectionObserver((entries) => {
+      if (forceIgnore.current) {
+        window.onscrollend = () => {
+          forceIgnore.current = false
+        }
+        return;
+      }
       // Update intersection set based on diff.
       const startedIntersecting: Set<string> = new Set;
       const stoppedIntersecting: Set<string> = new Set;
@@ -71,7 +83,6 @@ export function useColorSections(parent: React.RefObject<HTMLDivElement | null>)
       // that's our 'active' section.
       for (const id of reversedLinks) {
         if (intersecting.has(id)) {
-          console.log("intersecting", id);
           setCurrentUnderline(id);
           break;
         }
@@ -87,16 +98,19 @@ export function useColorSections(parent: React.RefObject<HTMLDivElement | null>)
     return () => {
       observer.disconnect()
     };
-  }, [parent]);
+  }, [forceIgnore, parent, prefersReducedMotion.matches, previous]);
 
   // Initialize the colors once
   useLayoutEffect(() => {
+    if (prefersReducedMotion.matches) {
+      return;
+    }
     const sub = document.querySelector('[data-sub="' + linksOrder[0] + '"]');
     const link = document.querySelector('[href="#' + linksOrder[0] + '"]');
     if (sub && link) {
       sub.classList.add('scale-x-100');
       link.classList.add('text-primary');
     }
-  }, []);
+  }, [prefersReducedMotion.matches]);
 
 }