Sidebar: header keeps opaque background in `inset` variant, and custom header content isn't hidden on collapse

[ravisuhag]

Summary

Two issues with the Sidebar component (@raystack/apsara@1.0.1).

---

Bug 1 — Sidebar.Header keeps an opaque background in the inset variant

In the inset variant the sidebar root becomes transparent, but Sidebar.Header retains an opaque background. Sidebar.Main and Sidebar.Footer are transparent as expected — only the header paints a solid band. Because the header stretches the full width of the sidebar, this opaque band can paint over the edge/shadow of adjacent content (e.g. an inset content panel sitting flush against the sidebar).

Steps to reproduce

1. Render a Sidebar with variant="inset" containing Sidebar.Header, Sidebar.Main, and Sidebar.Footer.
2. Place a sibling element next to the sidebar that has a box-shadow along the edge adjacent to the sidebar.
3. Observe the top region where the header sits.

Expected: In inset, the header is visually transparent like the root / main / footer and does not cover adjacent content.

Actual: The header renders an opaque background and visibly covers the adjacent element's shadow along the header's height.

Observation: Among the sidebar sub-regions, only the header declares its own background. The inset variant resets the root's background but not the header's.

---

Bug 2 — Custom Sidebar.Header content is not hidden when the sidebar is collapsed

When the sidebar is collapsed, built-in nav item labels and group labels are hidden correctly, but arbitrary content placed inside Sidebar.Header (e.g. an avatar + title) is not hidden. It is only clipped by the header's overflow, leaving a partial sliver of text visible.

Steps to reproduce

1. Render a collapsible Sidebar (defaultOpen) with a Sidebar.Header containing a leading icon/avatar plus a text title.
2. Collapse the sidebar.
3. Compare the header with the collapsed nav items.

Expected: Header content collapses cleanly, consistent with nav items (which fully hide their labels when collapsed).

Actual: A partial sliver of the header title text remains visible after collapse, while nav item labels disappear fully.

---

Environment

• @raystack/apsara: 1.0.1