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