test6

src/components/nav.tsx

@@ -25,7 +25,8 @@ export function Nav({
   t: typeof translations.pl
 }) {
   const { theme, setTheme } = useTheme()
-  const [activeSection, setActiveSection] = useState<Sections>("about")
+  const [activeSection,] = useState<Sections>("about")
+  // const deferedActiveSection = useDeferredValue(activeSection)
 
 
   useEffect(() => {
@@ -34,24 +35,26 @@ export function Nav({
       rootMargin: "-10px",
       threshold: 0.5, // Adjust the visibility threshold as needed
     };
-    let timeout: NodeJS.Timeout | null = null;
+    // let timeout: NodeJS.Timeout | null = null;
 
 
     const observer = new IntersectionObserver((entries) => {
-      if (timeout) {
-        clearTimeout(timeout);
+      // if (timeout) {
+      //   clearTimeout(timeout);
+      // }
+      for (const entry of entries) {
+        console.log(entry)
+        // const target = entry.target.id as keyof (typeof translations.pl)["nav"]
+        // if (activeSection !== target && entry.intersectionRatio > 0) {
+        //   // setActiveSection(target);
+        //   if (window.location.hash !== `#${target}` && history.replaceState) {
+        //     timeout = setTimeout(() => {
+        //       history.replaceState(null, "", `#${target}`)
+        //     }, 150)
+        //   }
+        // }
+        // break;
       }
-      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));
@@ -62,11 +65,7 @@ export function Nav({
     });
 
     return () => {
-      sections.forEach(section => {
-        if (section) {
-          observer.unobserve(section);
-        }
-      });
+      observer.disconnect()
     };
   }, []);
 
@@ -88,12 +87,12 @@ export function Nav({
                 <a
                   key={value}
                   href={`#${value}`}
-                  className={cn("text-sm md:text-md hover:text-primary transition-colors relative group", {
+                  className={cn("text-sm md:text-md hover:text-primary transition-colors relative group will-change-[color]", {
                     'text-primary': activeSection === value
                   })}
                 >
                   {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", {
+                  <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 will-change-transform", {
                     'scale-x-100': activeSection === value
                   })} />
                 </a>