Update proxmox-dashboard.tsx

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) {
+      } else if (scrollingDown) {
-        // Scrolling down - hide navigation
+        // Scrolling down → hide smoothly after small delay
-        setShowNavigation(false)
+        if (hideTimeout) clearTimeout(hideTimeout)
-      } else if (currentScrollY < lastScrollY - 12) {
+        hideTimeout = setTimeout(() => setShowNavigation(false), 100)
-        // Scrolling up - show navigation
+      } 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])