Function SidebarContent

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

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

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

function SidebarContent(
  props: ShellProps & {
    pathname: string;
    onNavigate?: () => void;
    showBrand?: boolean;
    onOpenCommands: () => void;
    onOpenIntegrationConnect: () => 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 flex items-center justify-between px-2.5 text-xs font-medium uppercase tracking-widest text-muted-foreground">
          <span>Integrations</span>
          <Button
            type="button"
            variant="ghost"
            size="icon-xs"
            aria-label="Browse integrations"
            title="Browse integrations"
            onClick={props.onOpenIntegrationConnect}
            className="-my-1 text-muted-foreground hover:bg-sidebar-active/60 hover:text-foreground"
          >
            <PlusIcon className="size-3.5" />
          </Button>
        </div>

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