From 947c9639e8f4ba4085ab5dff7a921deedaec58ee Mon Sep 17 00:00:00 2001
From: MacRimi <ricoextincion@gmail.com>
Date: Thu, 23 Oct 2025 18:31:44 +0200
Subject: [PATCH] Update proxmox-dashboard.tsx

---
 AppImage/components/proxmox-dashboard.tsx | 333 ++++++++++++----------
 1 file changed, 187 insertions(+), 146 deletions(-)

diff --git a/AppImage/components/proxmox-dashboard.tsx b/AppImage/components/proxmox-dashboard.tsx
index 4d415e7..d09c631 100644
--- a/AppImage/components/proxmox-dashboard.tsx
+++ b/AppImage/components/proxmox-dashboard.tsx
@@ -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,169 +318,184 @@ export function ProxmoxDashboard() {
         </div>
       </header>
 
+      <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"
+                className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+              >
+                Overview
+              </TabsTrigger>
+              <TabsTrigger
+                value="storage"
+                className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+              >
+                Storage
+              </TabsTrigger>
+              <TabsTrigger
+                value="network"
+                className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+              >
+                Network
+              </TabsTrigger>
+              <TabsTrigger
+                value="vms"
+                className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+              >
+                VMs & LXCs
+              </TabsTrigger>
+              <TabsTrigger
+                value="hardware"
+                className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+              >
+                Hardware
+              </TabsTrigger>
+              <TabsTrigger
+                value="logs"
+                className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+              >
+                System Logs
+              </TabsTrigger>
+            </TabsList>
+
+            <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
+              <div className="md:hidden">
+                <SheetTrigger asChild>
+                  <Button variant="outline" className="w-full justify-between bg-card border-border">
+                    <span>{getActiveTabLabel()}</span>
+                    <Menu className="h-4 w-4" />
+                  </Button>
+                </SheetTrigger>
+              </div>
+              <SheetContent side="top" className="bg-card border-border">
+                <div className="flex flex-col gap-2 mt-4">
+                  <Button
+                    variant="ghost"
+                    onClick={() => {
+                      setActiveTab("overview")
+                      setMobileMenuOpen(false)
+                    }}
+                    className={`w-full justify-start gap-3 ${
+                      activeTab === "overview"
+                        ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
+                        : ""
+                    }`}
+                  >
+                    <LayoutDashboard className="h-5 w-5" />
+                    <span>Overview</span>
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    onClick={() => {
+                      setActiveTab("storage")
+                      setMobileMenuOpen(false)
+                    }}
+                    className={`w-full justify-start gap-3 ${
+                      activeTab === "storage"
+                        ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
+                        : ""
+                    }`}
+                  >
+                    <HardDrive className="h-5 w-5" />
+                    <span>Storage</span>
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    onClick={() => {
+                      setActiveTab("network")
+                      setMobileMenuOpen(false)
+                    }}
+                    className={`w-full justify-start gap-3 ${
+                      activeTab === "network"
+                        ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
+                        : ""
+                    }`}
+                  >
+                    <NetworkIcon className="h-5 w-5" />
+                    <span>Network</span>
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    onClick={() => {
+                      setActiveTab("vms")
+                      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"
+                        : ""
+                    }`}
+                  >
+                    <Box className="h-5 w-5" />
+                    <span>VMs & LXCs</span>
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    onClick={() => {
+                      setActiveTab("hardware")
+                      setMobileMenuOpen(false)
+                    }}
+                    className={`w-full justify-start gap-3 ${
+                      activeTab === "hardware"
+                        ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
+                        : ""
+                    }`}
+                  >
+                    <Cpu className="h-5 w-5" />
+                    <span>Hardware</span>
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    onClick={() => {
+                      setActiveTab("logs")
+                      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"
+                        : ""
+                    }`}
+                  >
+                    <FileText className="h-5 w-5" />
+                    <span>System Logs</span>
+                  </Button>
+                </div>
+              </SheetContent>
+            </Sheet>
+          </Tabs>
+        </div>
+      </div>
+
       <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">
-          <TabsList className="hidden md:grid w-full grid-cols-6 bg-card border border-border">
-            <TabsTrigger
-              value="overview"
-              className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
-            >
-              Overview
-            </TabsTrigger>
-            <TabsTrigger
-              value="storage"
-              className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
-            >
-              Storage
-            </TabsTrigger>
-            <TabsTrigger
-              value="network"
-              className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
-            >
-              Network
-            </TabsTrigger>
-            <TabsTrigger
-              value="vms"
-              className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
-            >
-              VMs & LXCs
-            </TabsTrigger>
-            <TabsTrigger
-              value="hardware"
-              className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
-            >
-              Hardware
-            </TabsTrigger>
-            <TabsTrigger
-              value="logs"
-              className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
-            >
-              System Logs
-            </TabsTrigger>
-          </TabsList>
-
-          <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
-            <div className="md:hidden">
-              <SheetTrigger asChild>
-                <Button variant="outline" className="w-full justify-between bg-card border-border">
-                  <span>{getActiveTabLabel()}</span>
-                  <Menu className="h-4 w-4" />
-                </Button>
-              </SheetTrigger>
-            </div>
-            <SheetContent side="top" className="bg-card border-border">
-              <div className="flex flex-col gap-2 mt-4">
-                <Button
-                  variant="ghost"
-                  onClick={() => {
-                    setActiveTab("overview")
-                    setMobileMenuOpen(false)
-                  }}
-                  className={`w-full justify-start gap-3 ${
-                    activeTab === "overview"
-                      ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
-                      : ""
-                  }`}
-                >
-                  <LayoutDashboard className="h-5 w-5" />
-                  <span>Overview</span>
-                </Button>
-                <Button
-                  variant="ghost"
-                  onClick={() => {
-                    setActiveTab("storage")
-                    setMobileMenuOpen(false)
-                  }}
-                  className={`w-full justify-start gap-3 ${
-                    activeTab === "storage"
-                      ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
-                      : ""
-                  }`}
-                >
-                  <HardDrive className="h-5 w-5" />
-                  <span>Storage</span>
-                </Button>
-                <Button
-                  variant="ghost"
-                  onClick={() => {
-                    setActiveTab("network")
-                    setMobileMenuOpen(false)
-                  }}
-                  className={`w-full justify-start gap-3 ${
-                    activeTab === "network"
-                      ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
-                      : ""
-                  }`}
-                >
-                  <NetworkIcon className="h-5 w-5" />
-                  <span>Network</span>
-                </Button>
-                <Button
-                  variant="ghost"
-                  onClick={() => {
-                    setActiveTab("vms")
-                    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" : ""
-                  }`}
-                >
-                  <Box className="h-5 w-5" />
-                  <span>VMs & LXCs</span>
-                </Button>
-                <Button
-                  variant="ghost"
-                  onClick={() => {
-                    setActiveTab("hardware")
-                    setMobileMenuOpen(false)
-                  }}
-                  className={`w-full justify-start gap-3 ${
-                    activeTab === "hardware"
-                      ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
-                      : ""
-                  }`}
-                >
-                  <Cpu className="h-5 w-5" />
-                  <span>Hardware</span>
-                </Button>
-                <Button
-                  variant="ghost"
-                  onClick={() => {
-                    setActiveTab("logs")
-                    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" : ""
-                  }`}
-                >
-                  <FileText className="h-5 w-5" />
-                  <span>System Logs</span>
-                </Button>
-              </div>
-            </SheetContent>
-          </Sheet>
-
-          <TabsContent value="overview" 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>