ari_assistant/frontend/components/Topbar.tsx

// frontend/components/Topbar.tsx
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { MAIN } from "@/lib/nav";
import { Icon } from "./Icon";
import { ThemeToggle } from "./ThemeToggle";

// 사용자 이니셜 (원본 data.js: user.initial === "지")
const USER_INITIAL = "지";

export function Topbar() {
  const pathname = usePathname();
  return (
    <header className="topbar">
      <Link href="/dashboard" className="brand" aria-label="아리 홈">
        <div className="brand-mark">
          <Icon name="spark" />
        </div>
        <div className="brand-tag">
          <b>아리</b>
          <span>AI LIFE OS</span>
        </div>
      </Link>

      <nav className="mainnav" aria-label="메인 메뉴">
        {MAIN.map((m) => {
          // active: 정확히 일치하거나 하위 경로(예: /tasks/123)도 활성
          const active = pathname === m.href || pathname.startsWith(m.href + "/");
          return (
            <Link
              key={m.id}
              href={m.href}
              className={active ? "active" : ""}
              aria-current={active ? "page" : undefined}
            >
              <Icon name={m.icon} />
              {m.label}
              {m.badge && <span className="badge">{m.badge}</span>}
            </Link>
          );
        })}
      </nav>

      <div className="top-actions">
        <button className="t-btn" aria-label="검색">
          <Icon name="search" />
        </button>
        <button className="t-btn dot" aria-label="알림">
          <Icon name="bell" />
        </button>
        <ThemeToggle />
        <div className="t-ava" aria-hidden>
          {USER_INITIAL}
        </div>
      </div>
    </header>
  );
}