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

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.

Start in the global-header workspace and read the existing global header extension setup, then inspect useSidebarPinState and SidebarExpandButton to distinguish pin state from open state. Add SidebarPinToggle as the first header extension, hiding it on mobile and exposing the correct pin or unpin label; verify that clicking it toggles sidebar pin mode.