Sanitized mirror from private repository - 2026-04-18 11:19:59 UTC

2026-04-18 11:19:59 +00:00
commit fb00a325d1
1418 changed files with 359990 additions and 0 deletions
--- a/dashboard/ui/components/nav.tsx
+++ b/dashboard/ui/components/nav.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { RefreshIndicator } from "@/components/refresh-indicator";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+
+const tabs = [
+  { href: "/", label: "Dashboard", key: "1" },
+  { href: "/infrastructure", label: "Infrastructure", key: "2" },
+  { href: "/media", label: "Media", key: "3" },
+  { href: "/automations", label: "Automations", key: "4" },
+  { href: "/expenses", label: "Expenses", key: "5" },
+  { href: "/network", label: "Network", key: "6" },
+  { href: "/logs", label: "Logs", key: "7" },
+];
+
+export function Nav() {
+  const pathname = usePathname();
+  const today = new Date().toLocaleDateString("en-US", {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+
+  return (
+    <nav className="sticky top-0 z-50" style={{
+      background: "var(--nav-bg)",
+      backdropFilter: "blur(30px) saturate(180%)",
+      WebkitBackdropFilter: "blur(30px) saturate(180%)",
+      borderBottom: "1px solid var(--nav-border)",
+    }}>
+      {/* Accent gradient line at very top */}
+      <div className="h-[2px] w-full" style={{
+        background: `linear-gradient(90deg, var(--accent-color, #3b82f6), rgba(139,92,246,0.8), var(--accent-color, #3b82f6))`,
+        opacity: 0.6,
+      }} />
+      <div className="flex items-center justify-between px-6 h-12">
+        <div className="flex items-center gap-5">
+          <Link href="/" className="flex items-center gap-2.5 group">
+            <div className="w-8 h-8 rounded-[10px] bg-gradient-to-br from-blue-500 via-violet-500 to-pink-500 flex items-center justify-center text-white font-bold text-sm animate-logo-float transition-all group-hover:scale-105" style={{ boxShadow: "0 0 20px var(--accent-glow, rgba(139, 92, 246, 0.3))" }}>
+              H
+            </div>
+            <span className="font-semibold hidden sm:inline" style={{ color: "#f1f5f9" }}>Homelab</span>
+          </Link>
+          <div className="h-5 w-px bg-white/10 hidden sm:block" />
+          <div className="flex items-center gap-0.5">
+            {tabs.map((tab) => {
+              const isActive =
+                tab.href === "/"
+                  ? pathname === "/"
+                  : pathname.startsWith(tab.href);
+              return (
+                <Link
+                  key={tab.href}
+                  href={tab.href}
+                  className={cn(
+                    "px-2.5 py-1.5 text-xs rounded-md transition-all duration-200 whitespace-nowrap",
+                    isActive
+                      ? "font-medium"
+                      : "hover:text-foreground"
+                  )}
+                  style={
+                    isActive
+                      ? {
+                          background: "var(--nav-active)",
+                          color: "#f1f5f9",
+                          boxShadow: "var(--nav-active-glow, 0 2px 10px rgba(59,130,246,0.2))",
+                        }
+                      : { color: "rgba(148, 163, 184, 0.8)" }
+                  }
+                  onMouseEnter={(e) => {
+                    if (!isActive) {
+                      e.currentTarget.style.background = "var(--nav-hover)";
+                      e.currentTarget.style.color = "#e2e8f0";
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    if (!isActive) {
+                      e.currentTarget.style.background = "";
+                      e.currentTarget.style.color = "rgba(148, 163, 184, 0.8)";
+                    }
+                  }}
+                >
+                  {tab.label}
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          <kbd className="hidden sm:inline-flex items-center gap-1 rounded-md border border-white/[0.1] bg-white/[0.04] px-2 py-0.5 text-[10px] text-muted-foreground/60 cursor-pointer hover:bg-white/[0.08] transition-colors" onClick={() => window.dispatchEvent(new KeyboardEvent("keydown", { key: "k", metaKey: true }))}>
+            Ctrl+K
+          </kbd>
+          <ThemeSwitcher />
+          <div className="h-5 w-px bg-white/10 hidden md:block" />
+          <span className="text-[11px] hidden md:inline" style={{ color: "rgba(148, 163, 184, 0.6)" }}>{today}</span>
+          <RefreshIndicator />
+        </div>
+      </div>
+    </nav>
+  );
+}