Update proxmox-dashboard.tsx

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,8 +318,14 @@ export function ProxmoxDashboard() {
         </div>
       </header>
 
-      <div className="container mx-auto px-4 md:px-6 py-4 md:py-6">
+      <div
-        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4 md:space-y-6">
+        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>