triggershell/app/src/components/layout/nav.tsx

"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { Terminal, History, LogOut } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const links = [
  { href: "/", label: "Scripts", icon: Terminal },
  { href: "/runs", label: "History", icon: History },
];

export function Nav({
  authEnabled,
  username,
}: {
  authEnabled: boolean;
  username: string | null;
}) {
  const pathname = usePathname();
  const router = useRouter();

  async function handleLogout() {
    await fetch("/api/auth/logout", { method: "POST" });
    router.push("/login");
    router.refresh();
  }

  return (
    <header className="border-b bg-background/95 sticky top-0 z-10 backdrop-blur">
      <div className="mx-auto flex h-14 max-w-5xl items-center justify-between gap-2 px-4">
        <div className="flex min-w-0 items-center gap-3 sm:gap-6">
          <Link
            href="/"
            className="flex shrink-0 items-center gap-2 font-semibold tracking-tight"
          >
            <Terminal className="size-5" />
            <span className="hidden sm:inline">TriggerShell</span>
          </Link>
          <nav className="flex items-center gap-1">
            {links.map(({ href, label, icon: Icon }) => (
              <Link
                key={href}
                href={href}
                className={cn(
                  "text-muted-foreground hover:text-foreground flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium transition-colors sm:px-3",
                  pathname === href && "bg-muted text-foreground",
                )}
              >
                <Icon className="size-4" />
                <span className="sr-only sm:not-sr-only">{label}</span>
              </Link>
            ))}
          </nav>
        </div>
        {authEnabled && (
          <div className="flex shrink-0 items-center gap-2 sm:gap-3">
            <span className="text-muted-foreground hidden max-w-32 truncate text-sm sm:inline-block">
              {username}
            </span>
            <Button variant="ghost" size="sm" onClick={handleLogout}>
              <LogOut className="size-4" />
              <span className="sr-only sm:not-sr-only">Log out</span>
            </Button>
          </div>
        )}
      </div>
    </header>
  );
}