Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-11-18 03:26:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update proxmox-dashboard.tsx

Browse Source
This commit is contained in:
MacRimi
2025-10-23 22:25:59 +02:00
parent 9c46452a4d
commit 9ebf5919a2
1 changed files with 24 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
AppImage/components/proxmox-dashboard.tsx
View File

@@ -130,25 +130,37 @@ export function ProxmoxDashboard() {
}, [fetchSystemData])
useEffect(() => {
let hideTimeout: ReturnType<typeof setTimeout> | null = null
let lastPosition = window.scrollY
const handleScroll = () => {
const currentScrollY = window.scrollY
const delta = currentScrollY - lastPosition
if (currentScrollY < 90) {
// Siempre visible al principio
if (currentScrollY < 50) {
setShowNavigation(true)
} else if (currentScrollY > lastScrollY + 12) {
// Scrolling down - hide navigation
setShowNavigation(false)
} else if (currentScrollY < lastScrollY - 12) {
// Scrolling up - show navigation
}
// Oculta en cuanto se detecta desplazamiento hacia abajo
else if (delta > 2) {
if (hideTimeout) clearTimeout(hideTimeout)
hideTimeout = setTimeout(() => setShowNavigation(false), 50)
}
// Muestra al mover un poco hacia arriba
else if (delta < -2) {
if (hideTimeout) clearTimeout(hideTimeout)
setShowNavigation(true)
}
setLastScrollY(currentScrollY)
lastPosition = currentScrollY
}
window.addEventListener("scroll", handleScroll, { passive: true })
return () => window.removeEventListener("scroll", handleScroll)
}, [lastScrollY])
return () => {
window.removeEventListener("scroll", handleScroll)
if (hideTimeout) clearTimeout(hideTimeout)
}
}, [])
const refreshData = async () => {
setIsRefreshing(true)
@@ -317,11 +329,11 @@ export function ProxmoxDashboard() {
<div
className={`sticky z-40 bg-background
top-[120px] md:top-[76px]
transition-transform duration-500 ease-[cubic-bezier(0.4,0,0.2,1)]
top-[120px] md:top-[76px]
transition-all duration-700 ease-[cubic-bezier(0.4,0,0.2,1)]
${showNavigation
? "translate-y-0 opacity-100"
: "-translate-y-full opacity-0 pointer-events-none"}
: "-translate-y-[120%] opacity-0 pointer-events-none"}
`}
>
<div className="container mx-auto px-4 md:px-6 pt-4 md:pt-6">