cm_bot_v2/web/components/nav.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import { logout } from "@/app/auth-actions";

type Props = { username: string };

export default function Nav({ username }: Props) {
  const pathname = usePathname() ?? "/";
  const isPasskeys = pathname.startsWith("/cm-passkeys");
  const isUsers = pathname.startsWith("/users");
  const isAccounts = !isUsers && !isPasskeys;
  const initial = (username[0] ?? "?").toUpperCase();

  return (
    <header
      className="sticky top-0 z-10 border-b border-zinc-200/80 bg-white/80 backdrop-blur-md"
      style={{
        paddingTop: "env(safe-area-inset-top)",
        paddingLeft: "env(safe-area-inset-left)",
        paddingRight: "env(safe-area-inset-right)",
      }}
    >
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-3 px-4 py-4 sm:gap-4 sm:px-6">
        <Link href="/" className="group flex shrink-0 items-center gap-3">
          <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-900 text-[11px] font-semibold tracking-tight text-white">
            CM
          </span>
          <span className="hidden flex-col leading-none sm:flex">
            <span className="text-sm font-semibold tracking-tight text-zinc-900">
              CM Bot V2
            </span>
            <span className="mt-0.5 text-[11px] text-zinc-500">
              Account dashboard
            </span>
          </span>
        </Link>

        <div className="flex min-w-0 items-center gap-2 sm:gap-3">
          <nav
            aria-label="Primary"
            className="flex items-center gap-1 rounded-full bg-zinc-100 p-1"
          >
            <NavLink href="/" active={isAccounts}>
              Accounts
            </NavLink>
            <NavLink href="/users" active={isUsers}>
              Users
            </NavLink>
          </nav>
          <AccountMenu username={username} initial={initial} />
        </div>
      </div>
    </header>
  );
}

function NavLink({
  href,
  active,
  children,
}: {
  href: string;
  active: boolean;
  children: React.ReactNode;
}) {
  return (
    <Link
      href={href}
      aria-current={active ? "page" : undefined}
      className={`inline-flex items-center rounded-full px-4 py-1.5 text-xs font-medium transition-colors sm:text-sm ${
        active
          ? "bg-white text-zinc-900 shadow-sm ring-1 ring-zinc-200/60"
          : "text-zinc-500 hover:text-zinc-900"
      }`}
    >
      {children}
    </Link>
  );
}

function AccountMenu({
  username,
  initial,
}: {
  username: string;
  initial: string;
}) {
  const [open, setOpen] = useState(false);
  const wrapperRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) return;
    function onPointerDown(e: PointerEvent) {
      if (!wrapperRef.current) return;
      if (!wrapperRef.current.contains(e.target as Node)) setOpen(false);
    }
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape") setOpen(false);
    }
    document.addEventListener("pointerdown", onPointerDown);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("pointerdown", onPointerDown);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  return (
    <div ref={wrapperRef} className="relative">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-haspopup="menu"
        aria-expanded={open}
        className="inline-flex items-center gap-2 rounded-full px-2 py-1 text-xs font-medium text-zinc-700 transition-colors hover:bg-zinc-100"
      >
        <span className="flex h-6 w-6 items-center justify-center rounded-full bg-zinc-900 text-[10px] font-semibold text-white">
          {initial}
        </span>
        <span className="hidden max-w-[10rem] truncate sm:inline">
          {username}
        </span>
      </button>
      {open && (
        <div
          role="menu"
          className="absolute right-0 top-[calc(100%+0.5rem)] z-20 w-48 overflow-hidden rounded-xl bg-white py-1 shadow-lg ring-1 ring-zinc-200/60"
        >
          <div className="px-3 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wider text-zinc-400 sm:hidden">
            {username}
          </div>
          <Link
            href="/cm-passkeys"
            role="menuitem"
            onClick={() => setOpen(false)}
            className="block px-3 py-2 text-xs text-zinc-700 transition-colors hover:bg-zinc-50 hover:text-zinc-900"
          >
            Passkey settings
          </Link>
          <form action={logout}>
            <button
              type="submit"
              role="menuitem"
              onClick={() => setOpen(false)}
              className="block w-full px-3 py-2 text-left text-xs text-zinc-700 transition-colors hover:bg-zinc-50 hover:text-red-600"
            >
              Sign out
            </button>
          </form>
        </div>
      )}
    </div>
  );
}