SideNavCollapseButton is not centered when SideNav is collapsed

[soham901]

Package

@astryxdesign/core@0.3.0

Component

SideNavCollapseButton

Description

When using the native collapse button inside a SideNav, the button is not horizontally centered after the sidebar collapses. The button remains aligned toward the start of the
footer area instead of being centered within the collapsed sidebar width.

Reproduction

<SideNav
  collapsible={{ hasButton: false }}
  footerIcons={
    <HStack width="fill" hAlign="center" align="center">
      <SideNavCollapseButton />
    </HStack>
  }
>
  <SideNavItem label="Dashboard" href="/dashboard" />
</SideNav>

Alternatively, using the built-in button:

<SideNav collapsible>
    <SideNavItem label="Dashboard" href="/dashboard" />
  </SideNav>

Expected behavior

When the sidebar is collapsed, the collapse/expand button should be centered horizontally within the collapsed sidebar column.

Actual behavior

The button is positioned toward the left/start side of the collapsed sidebar, leaving noticeably more empty space on the opposite side.

Additional context

The issue appears to be related to the layout of the native footer container that renders the collapse control. Wrapping the button in a centered HStack does not fully resolve the issue when using the built-in footer layout.

Suggested fix

Ensure the footer container or collapse-button wrapper uses centered alignment when the sidebar is collapsed, for example:

justify-content: center;

or apply a collapsed-specific style to the footer button container

[HelloOjasMutreja]

Couldn't reproduce this against current main. Both repros from the report:

1. The built-in button (collapsible without hasButton: false) — checked against the Core/SideNav "Collapsible Sidebar" Storybook story, collapsed. Measured each footer button's bounding box against the rail: Expand sidebar, Help, Notifications all render with equal left/right gaps (10px each side of a 48px-wide collapsed rail).

2. The custom footerIcons wrapper (collapsible={{ hasButton: false }} + your own wrapper around SideNavCollapseButton) — also centered once measured, with one caveat: width="fill" isn't a documented value for Stack/HStack's width prop (it takes a number treated as px or a string used as-is, e.g. '100%'; see Stack.doc.mjs). width="fill" compiles to the literal CSS width: fill, which no browser accepts as a width value, so it's silently dropped. That said, it doesn't actually matter for this particular layout: the wrapper is the only child of SideNav's internal footer row, which already applies alignItems: center when collapsed, so the wrapper centers regardless of its own width.

This looks like it's already fixed: #4852 ("center footer content when collapsed") landed exactly this fix, and the report is filed against @astryxdesign/core@0.3.0 — several releases behind current main (0.4.6). Could you confirm whether this still reproduces on a current install? If it does, a minimal reproduction (sandbox link or exact story) would help narrow down what's different from what's covered above.