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 18:31:44 +02:00
parent c4cdf4a834
commit 947c9639e8
1 changed files with 187 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,7 @@
"use client"
import type React from "react"
import { useState, useEffect, useMemo, useCallback } from "react"
import { Badge } from "./ui/badge"
import { Button } from "./ui/button"
@@ -59,6 +61,8 @@ export function ProxmoxDashboard() {
const [componentKey, setComponentKey] = useState(0)
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
const [activeTab, setActiveTab] = useState("overview")
const [showNavigation, setShowNavigation] = useState(true)
const [lastScrollY, setLastScrollY] = useState(0)
const fetchSystemData = useCallback(async () => {
console.log("[v0] Fetching system data from Flask server...")
@@ -127,6 +131,28 @@ export function ProxmoxDashboard() {
return () => clearInterval(interval)
}, [fetchSystemData])
useEffect(() => {
const handleScroll = () => {
const currentScrollY = window.scrollY
// Only hide navigation if scrolled down more than 100px
if (currentScrollY < 100) {
setShowNavigation(true)
} else if (currentScrollY > lastScrollY) {
// Scrolling down - hide navigation
setShowNavigation(false)
} else if (currentScrollY < lastScrollY) {
// Scrolling up - show navigation
setShowNavigation(true)
}
setLastScrollY(currentScrollY)
}
window.addEventListener("scroll", handleScroll, { passive: true })
return () => window.removeEventListener("scroll", handleScroll)
}, [lastScrollY])
const refreshData = async () => {
setIsRefreshing(true)
await fetchSystemData()
@@ -292,8 +318,14 @@ export function ProxmoxDashboard() {
</div>
</header>
<div className="container mx-auto px-4 md:px-6 py-4 md:py-6">
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4 md:space-y-6">
<div
className={`sticky top-[var(--header-height)] z-40 bg-background transition-transform duration-300 ${
showNavigation ? "translate-y-0" : "-translate-y-full"
}`}
style={{ "--header-height": "88px" } as React.CSSProperties}
>
<div className="container mx-auto px-4 md:px-6 pt-4 md:pt-6">
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-0">
<TabsList className="hidden md:grid w-full grid-cols-6 bg-card border border-border">
<TabsTrigger
value="overview"
@@ -396,7 +428,9 @@ export function ProxmoxDashboard() {
setMobileMenuOpen(false)
}}
className={`w-full justify-start gap-3 ${
activeTab === "vms" ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none" : ""
activeTab === "vms"
? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
: ""
}`}
>
<Box className="h-5 w-5" />
@@ -424,7 +458,9 @@ export function ProxmoxDashboard() {
setMobileMenuOpen(false)
}}
className={`w-full justify-start gap-3 ${
activeTab === "logs" ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none" : ""
activeTab === "logs"
? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
: ""
}`}
>
<FileText className="h-5 w-5" />
@@ -433,28 +469,33 @@ export function ProxmoxDashboard() {
</div>
</SheetContent>
</Sheet>
</Tabs>
</div>
</div>
<TabsContent value="overview" className="space-y-4 md:space-y-6">
<div className="container mx-auto px-4 md:px-6 py-4 md:py-6">
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4 md:space-y-6">
<TabsContent value="overview" className="space-y-4 md:space-y-6 mt-0">
<SystemOverview key={`overview-${componentKey}`} />
</TabsContent>
<TabsContent value="storage" className="space-y-4 md:space-y-6">
<TabsContent value="storage" className="space-y-4 md:space-y-6 mt-0">
<StorageOverview key={`storage-${componentKey}`} />
</TabsContent>
<TabsContent value="network" className="space-y-4 md:space-y-6">
<TabsContent value="network" className="space-y-4 md:space-y-6 mt-0">
<NetworkMetrics key={`network-${componentKey}`} />
</TabsContent>
<TabsContent value="vms" className="space-y-4 md:space-y-6">
<TabsContent value="vms" className="space-y-4 md:space-y-6 mt-0">
<VirtualMachines key={`vms-${componentKey}`} />
</TabsContent>
<TabsContent value="hardware" className="space-y-4 md:space-y-6">
<TabsContent value="hardware" className="space-y-4 md:space-y-6 mt-0">
<Hardware key={`hardware-${componentKey}`} />
</TabsContent>
<TabsContent value="logs" className="space-y-4 md:space-y-6">
<TabsContent value="logs" className="space-y-4 md:space-y-6 mt-0">
<SystemLogs key={`logs-${componentKey}`} />
</TabsContent>
</Tabs>