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

test4

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

84
src/components/nav.tsx
View file

@ -1,8 +1,9 @@
"use client" "use client"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { type translations } from "@/i18n/translations" import { Sections, 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"
@ -24,52 +25,47 @@ export function Nav({
t: typeof translations.pl t: typeof translations.pl
}) { }) {
const { theme, setTheme } = useTheme() const { theme, setTheme } = useTheme()
const activeSection = 'about' const [activeSection, setActiveSection] = useState<Sections>("about")
// const [activeSection, setActiveSection] = useState<Sections>("about") const deferedActiveSection = useDeferredValue(activeSection)
// 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.intersectionRatio > 0) {
// 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 => { observer.disconnect()
// if (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]">
@ -90,12 +86,12 @@ export function Nav({
key={value} key={value}
href={`#${value}`} href={`#${value}`}
className={cn("text-sm md:text-md hover:text-primary transition-colors relative group will-change-[color]", { className={cn("text-sm md:text-md hover:text-primary transition-colors relative group will-change-[color]", {
'text-primary': activeSection === value 'text-primary': deferedActiveSection === 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 will-change-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 'scale-x-100': deferedActiveSection === value
})} /> })} />
</a> </a>
))} ))}
@ -114,7 +110,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={activeSection} /> <MobileNav t={t} linksOrder={linksOrder} activeSection={deferedActiveSection} />
</div> </div>
</div> </div>
</div> </div>