infra/site
2
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

testing again

Browse source
This commit is contained in:
Dariusz Niemczyk 2025-02-13 01:19:29 +01:00
parent 3b1bbdf67c
commit 940b482680
No known key found for this signature in database
1 changed files with 46 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
src/components/nav.tsx
View file

@ -1,9 +1,8 @@
"use client" "use client"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Sections, type translations } from "@/i18n/translations" import { type translations } from "@/i18n/translations"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
import { MoonIcon, SunIcon } from "lucide-react" import { MoonIcon, SunIcon } from "lucide-react"
import { useDeferredValue, useEffect, useState } from "react"
import { MobileNav } from "./mobile-nav" import { MobileNav } from "./mobile-nav"
import { useTheme } from "./providers" import { useTheme } from "./providers"
import { LanguageSelector } from "./ui/language-selector" import { LanguageSelector } from "./ui/language-selector"
@ -25,51 +24,52 @@ export function Nav({
t: typeof translations.pl t: typeof translations.pl
}) { }) {
const { theme, setTheme } = useTheme() const { theme, setTheme } = useTheme()
const [activeSection, setActiveSection] = useState<Sections>("about") const activeSection = 'about'
const deferedActiveSection = useDeferredValue(activeSection) // const [activeSection, setActiveSection] = useState<Sections>("about")
// const deferedActiveSection = useDeferredValue(activeSection)
useEffect(() => { // useEffect(() => {
const options = { // const options = {
root: null, // root: null,
rootMargin: "-10px", // rootMargin: "-10px",
threshold: 0.5, // Adjust the visibility threshold as needed // 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) => { // const observer = new IntersectionObserver((entries) => {
if (timeout) { // if (timeout) {
clearTimeout(timeout); // clearTimeout(timeout);
} // }
entries.forEach(entry => { // entries.forEach(entry => {
const target = entry.target.id as keyof (typeof translations.pl)["nav"] // const target = entry.target.id as keyof (typeof translations.pl)["nav"]
if (entry.isIntersecting) { // if (entry.isIntersecting) {
setActiveSection(target); // setActiveSection(target);
if (window.location.hash !== `#${target}` && history.replaceState) { // if (window.location.hash !== `#${target}` && history.replaceState) {
timeout = setTimeout(() => { // timeout = setTimeout(() => {
history.replaceState(null, "", `#${target}`) // history.replaceState(null, "", `#${target}`)
}, 150) // }, 150)
} // }
} // }
}); // });
}, options); // }, options);
const sections = linksOrder.map(value => document.getElementById(value)); // const sections = linksOrder.map(value => document.getElementById(value));
sections.forEach(section => { // sections.forEach(section => {
if (section) { // if (section) {
observer.observe(section); // observer.observe(section);
} // }
}); // });
return () => { // return () => {
sections.forEach(section => { // sections.forEach(section => {
if (section) { // if (section) {
observer.unobserve(section); // observer.unobserve(section);
} // }
}); // });
}; // };
}, []); // }, []);
return ( return (
<nav className="fixed top-0 left-0 right-0 backdrop-blur-xs bg-background/40 border-b z-[10000]"> <nav className="fixed top-0 left-0 right-0 backdrop-blur-xs bg-background/40 border-b z-[10000]">
@ -89,13 +89,13 @@ export function Nav({
<a <a
key={value} key={value}
href={`#${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': deferedActiveSection === value 'text-primary': activeSection === value
})} })}
> >
{t.nav[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': deferedActiveSection === value 'scale-x-100': activeSection === value
})} /> })} />
</a> </a>
))} ))}
@ -114,7 +114,7 @@ export function Nav({
{/* Mobile Navigation */} {/* Mobile Navigation */}
<div className="md:hidden ml-2"> <div className="md:hidden ml-2">
<MobileNav t={t} linksOrder={linksOrder} activeSection={deferedActiveSection} /> <MobileNav t={t} linksOrder={linksOrder} activeSection={activeSection} />
</div> </div>
</div> </div>
</div> </div>