Function SidebarContent

packages/react/src/multiplayer/shell.tsx:344–409

(
  props: ShellProps & {
    pathname: string;
    onNavigate?: () => void;
    showBrand?: boolean;
    onOpenCommands: () => void;
  },
)

// ── SidebarContent ───────────────────────────────────────────────────────

function SidebarContent(
  props: ShellProps & {
    pathname: string;
    onNavigate?: () => void;
    showBrand?: boolean;
    onOpenCommands: () => void;
  },
) {
  const plugins = useClientPlugins();
  const pluginNavItems = plugins.flatMap((plugin) =>
    (plugin.pages ?? []).flatMap((page) =>
      page.nav
        ? [
            {
              to: pluginPageNavPath(plugin.id, page.path),
              label: page.nav.label,
            },
          ]
        : [],
    ),
  );
  const navItems = [...(props.navItems ?? defaultShellNavItems), ...pluginNavItems];
  return (
    <>
      {props.showBrand !== false && (
        <div className="flex h-12 shrink-0 items-center border-b border-sidebar-border px-4">
          <Brand onNavigate={props.onNavigate} />
        </div>
      )}

      <nav className="flex flex-1 flex-col overflow-y-auto p-2">
        {navItems.map((item) => (
          <NavItem
            key={item.to}
            to={item.to}
            label={item.label}
            active={item.to === "/" ? props.pathname === "/" : props.pathname.startsWith(item.to)}
            onNavigate={props.onNavigate}
          />
        ))}

        <div className="mt-5 mb-1 px-2.5 text-xs font-medium uppercase tracking-widest text-muted-foreground">
          <span>Integrations</span>
        </div>

        <IntegrationList pathname={props.pathname} onNavigate={props.onNavigate} />
      </nav>

      <SidebarUpdateCard />

      <div className="shrink-0 border-t border-sidebar-border p-2">
        <CommandsButton onOpen={props.onOpenCommands} />
        <DocsLink href={props.docsUrl ?? DEFAULT_DOCS_URL} onNavigate={props.onNavigate} />
        {APP_VERSION && (
          <p className="px-2.5 pt-1.5 font-mono text-[11px] text-muted-foreground tabular-nums">
            v{APP_VERSION}
          </p>
        )}