106 lines
4.4 KiB
TypeScript
106 lines
4.4 KiB
TypeScript
"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>
|
|
);
|
|
}
|