NavItem: support custom link component (e.g. Next.js Link)

[herbie-bot]

Problem

NavItem in the Sidebar component currently renders a plain <a> tag:

<a href={href} onClick={onClick} className={...}>

In Next.js applications, this causes full-page reloads on every navigation instead of fast client-side routing via next/link. Both open-crm and open-tasks are affected.

Proposed Solution

Add an optional linkComponent prop to NavItem (and SidebarHeader) that allows consumers to pass a custom link component:

interface NavItemProps {
  readonly href: string;
  readonly icon: React.ReactNode;
  readonly label: string;
  readonly active?: boolean;
  readonly indented?: boolean;
  readonly onClick?: () => void;
  readonly linkComponent?: React.ElementType; // e.g. Next.js Link
}

Usage in Next.js apps:

import Link from "next/link";

<NavItem href="/tasks" linkComponent={Link} icon={...} label="Tasks" />

When linkComponent is not provided, fall back to <a> (current behavior) for backward compatibility.

Affected Components

• NavItem (line 25 in sidebar.tsx)
• SidebarHeader (lines 169, 173 — both <a> tags)

Context

Discovered during planning of the open-tasks frontend migration to @open-elements/ui. Also applies to open-crm.