Function SideNav

package/example/src/app/SideNav.tsx:29–203

()

}

export function SideNav() {
  const pathname = usePathname();
  const [npmVersion, setNpmVersion] = useState<string | null>(null);

  useEffect(() => {
    fetch('https://registry.npmjs.org/agentation')
      .then(res => res.json())
      .then(data => {
        const latest = data['dist-tags']?.latest;
        setNpmVersion(latest);
      })
      .catch(() => {});
  }, []);

  const links: ({ href: string; label: string; badge?: string; items?: { id: string; text: string }[] } | { section: string })[] = [
    { href: "/", label: "Overview" },
    { href: "/install", label: "Install" },
    {
      href: "/features",
      label: "Features",
      items: [
        { id: 'annotation-modes', text: 'Annotation Modes' },
        { id: 'toolbar-controls', text: 'Toolbar Controls' },
        { id: 'marker-types', text: 'Marker Types' },
        { id: 'smart-identification', text: 'Smart Identification' },
        { id: 'computed-styles', text: 'Computed Styles' },
        { id: 'react-detection', text: 'React Detection' },
        { id: 'layout-mode', text: 'Layout Mode' },
        { id: 'keyboard-shortcuts', text: 'Keyboard Shortcuts' },
        { id: 'agent-sync', text: 'Agent Sync' },
        { id: 'settings', text: 'Settings' },
      ],
    },
    { href: "/output", label: "Output" },
    {
      href: "/schema",
      label: "Schema",
      badge: "AFS 1.1",
      items: [
        { id: 'overview', text: 'Overview' },
        { id: 'design-goals', text: 'Design Goals' },
        { id: 'annotation-object', text: 'Annotation Object' },
        { id: 'typescript-definition', text: 'TypeScript' },
        { id: 'event-envelope', text: 'Event Envelope' },
        { id: 'json-schema', text: 'JSON Schema' },
        { id: 'example', text: 'Example' },
        { id: 'markdown-output', text: 'Markdown Output' },
        { id: 'implementations', text: 'Implementations' },
        { id: 'building', text: 'Building' },
        { id: 'why', text: 'Why This Format?' },
        { id: 'versioning', text: 'Versioning' },
      ],
    },
    { section: "Tools" },
    {
      href: "/mcp",
      label: "MCP",
      items: [