refactor: implement smart navigation for "Get Mycelium Connector" button with smooth scroll utility

- Added smoothScrollToElement utility function in src/utils/scroll.ts with easeInOutQuad animation and configurable duration
- Changed Header and HeaderDark "Get Mycelium Connector" button from static /download link to onClick handler with conditional navigation
- Added handleGetConnectorClick function that scrolls to #download section when on /network page, otherwise navigates to /network
- Change
This commit is contained in:
2025-11-24 14:13:40 +01:00
parent a22a8ddcc9
commit 6b4c7b3329
6 changed files with 95 additions and 16 deletions

28
src/utils/scroll.ts Normal file
View File

@@ -0,0 +1,28 @@
export function smoothScrollToElement(id: string, duration = 800) {
const element = document.getElementById(id)
if (!element) return
const startY = window.scrollY || window.pageYOffset
const targetRect = element.getBoundingClientRect()
const targetY = startY + targetRect.top
const startTime = performance.now()
function easeInOutQuad(t: number) {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
}
function step(currentTime: number) {
const elapsed = currentTime - startTime
const progress = Math.min(elapsed / duration, 1)
const eased = easeInOutQuad(progress)
const nextY = startY + (targetY - startY) * eased
window.scrollTo(0, nextY)
if (progress < 1) {
requestAnimationFrame(step)
}
}
requestAnimationFrame(step)
}