Global header: Add extension with a button to toggle sidebar pin mode

[christoph-jerolimov]

Add a new Backstage extension (new frontend system only) to the global-header workspace that allow the user to toggle the sidebar pin mode.

What exists today

• The "Pin Sidebar" switch on the settings page just calls useSidebarPinState(), which returns isPinned, toggleSidebarPinState and isMobile. That hook is public and usable anywhere.
• There is also a built-in SidebarExpandButton component. It toggles open state via useSidebarOpenState(), not pin state. Clicking it opens the sidebar, but it will collapse again on mouse leave if not pinned, so it is not the same as the settings switch.

How to add it

A small component rendered as Global header extension, on the first position.

import { ButtonIcon } from '@backstage/ui';
import { useSidebarPinState } from '@backstage/core-components';
import { RiCloseLine } from '@remixicon/react';

const SidebarPinToggle = () => {
  const { isPinned, toggleSidebarPinState, isMobile } = useSidebarPinState();
  if (isMobile) return null;
  return (
    <ButtonIcon
      icon={<RiCloseLine />}
      variant="tertiary"
      size="medium"
      aria-label={isPinned ? 'Unpin sidebar' : 'Pin sidebar'}
      onClick={toggleSidebarPinState}
    />
  );
};

Ensure that the SidebarPinToggle is shown as first extension in the header, before the icon.

[fullsend-ai-triage]

🤖 Finished Triage · ✅ Success · Started 10:53 PM UTC · Completed 10:58 PM UTC

Commit: 4fdf9f5 · View workflow run →

Runtime: claude · Model: opus → claude-opus-4-6 · Effort: high · Cost: $0.89

[fullsend-ai-triage]

Recommended fix

Follow the existing GlobalHeaderComponentBlueprint pattern in defaults/toolbarExtensions.tsx. Create the component, register it with a priority above 200 (to render before the company logo), and wire it into defaults/index.ts and plugin.ts.

Note: the snippet references ButtonIcon from @backstage/ui and RiCloseLine from @remixicon/react — verify these are available in the workspace's dependency tree. The existing codebase uses HeaderIconButton and MUI IconButton for similar header actions, which may be more consistent.

Proposed test case

// Render SidebarPinToggle with mocked sidebar pin state
// 1. When isPinned=false → aria-label is 'Pin sidebar'
// 2. When isPinned=true → aria-label is 'Unpin sidebar'
// 3. Click → calls toggleSidebarPinState
// 4. When isMobile=true → renders nothing
// 5. Extension priority > 200 so it renders before company-logo

---

Labels: Feature request targeting the global-header workspace — applying workspace and feature labels per repo conventions.

---

Next steps:

• /fs-code — agent creates a PR to implement this issue
• /fs-code <your instruction> — agent implements with your specific guidance

[christoph-jerolimov]

/fs-code

[fullsend-ai-coder]

🤖 Finished Code · ✅ Success · Started 11:21 PM UTC · Completed 11:35 PM UTC

Commit: 4fdf9f5 · View workflow run →

Runtime: claude · Model: opus → claude-opus-4-6 · Cost: $3.58