82 lines
3.2 KiB
TypeScript
82 lines
3.2 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 border-b backdrop-blur-xl" style={{ borderColor: "var(--nav-border)", background: "var(--nav-bg)" }}>
|
|
<div className="flex items-center justify-between px-6 h-14">
|
|
<div className="flex items-center gap-6">
|
|
<Link href="/" className="flex items-center gap-2 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-shadow" style={{ boxShadow: "0 0 20px rgba(139, 92, 246, 0.3)" }}>
|
|
H
|
|
</div>
|
|
<span className="font-semibold text-foreground hidden sm:inline">Homelab</span>
|
|
</Link>
|
|
<div className="flex items-center gap-1">
|
|
{tabs.map((tab) => {
|
|
const isActive =
|
|
tab.href === "/"
|
|
? pathname === "/"
|
|
: pathname.startsWith(tab.href);
|
|
return (
|
|
<Link
|
|
key={tab.href}
|
|
href={tab.href}
|
|
className={cn(
|
|
"px-3 py-1.5 text-xs lg:text-sm rounded-lg transition-all duration-200 relative whitespace-nowrap",
|
|
isActive
|
|
? "text-foreground backdrop-blur-sm"
|
|
: "text-muted-foreground hover:text-foreground"
|
|
)}
|
|
style={
|
|
isActive
|
|
? { background: "var(--nav-active)" }
|
|
: {}
|
|
}
|
|
onMouseEnter={(e) => {
|
|
if (!isActive) e.currentTarget.style.background = "var(--nav-hover)";
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
if (!isActive) e.currentTarget.style.background = "";
|
|
}}
|
|
>
|
|
{tab.label}
|
|
<span className="ml-0.5 text-[8px] text-muted-foreground/40 hidden lg:inline">{tab.key}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<ThemeSwitcher />
|
|
<span className="text-xs text-muted-foreground/70 hidden md:inline">{today}</span>
|
|
<RefreshIndicator />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|