diff --git a/AppImage/components/proxmox-dashboard.tsx b/AppImage/components/proxmox-dashboard.tsx index 3864f78..f00bccc 100644 --- a/AppImage/components/proxmox-dashboard.tsx +++ b/AppImage/components/proxmox-dashboard.tsx @@ -130,22 +130,39 @@ export function ProxmoxDashboard() { }, [fetchSystemData]) useEffect(() => { + let hideTimeout: NodeJS.Timeout | null = null + const handleScroll = () => { const currentScrollY = window.scrollY + const scrollingDown = currentScrollY > lastScrollY + const scrollingUp = currentScrollY < lastScrollY - if (currentScrollY < 100) { + if (currentScrollY < 150) { + // Top of page → always show + if (hideTimeout) clearTimeout(hideTimeout) setShowNavigation(true) - } else if (currentScrollY > lastScrollY + 10) { - // Scrolling down - hide navigation - setShowNavigation(false) - } else if (currentScrollY < lastScrollY - 12) { - // Scrolling up - show navigation + } else if (scrollingDown) { + // Scrolling down → hide smoothly after small delay + if (hideTimeout) clearTimeout(hideTimeout) + hideTimeout = setTimeout(() => setShowNavigation(false), 100) + } else if (scrollingUp) { + // Scrolling up → show immediately + if (hideTimeout) clearTimeout(hideTimeout) setShowNavigation(true) } setLastScrollY(currentScrollY) } + window.addEventListener("scroll", handleScroll, { passive: true }) + + return () => { + window.removeEventListener("scroll", handleScroll) + if (hideTimeout) clearTimeout(hideTimeout) + } + }, [lastScrollY]) + + window.addEventListener("scroll", handleScroll, { passive: true }) return () => window.removeEventListener("scroll", handleScroll) }, [lastScrollY])