-
-
Notifications
You must be signed in to change notification settings - Fork 96
Open
Labels
Description
Problem
Currently, the Sidebar2 component renders a scrollable content area (.nav-scrollable) with a hardcoded height defined via scoped CSS:
@media (min-width: 641px) {
.nav-scrollable[b-xxxxxxx] {
height: calc(100vh - 3.5rem);
overflow-y: auto;
}
}
This prevents consumers from overriding the height or using a custom layout with a footer, as the height gets reapplied after window resizing due to media queries or re-rendering.
Expected Behavior
As a library consumer, I would like to:
Override the scrollable content height via a CSS variable (e.g. --bb-sidebar-content-height)
Or pass a parameter like ContentHeight to the Sidebar2 component
Or have the ability to disable internal height styling entirely and manage layout externally
Why This Matters
When using a layout with a fixed footer, the hardcoded height causes the last few sidebar items to be hidden behind the footer, especially on smaller screen heights. Using global CSS or inline styles doesn't work due to scoped CSS and internal media queries.
Proposed Solution
Add support for one of the following:
A CSS variable like --bb-sidebar-content-height used in the scoped style
A ContentHeight parameter on the Sidebar2 component
An option to disable or override internal height behavior (similar to class or style passthrough)
This would make Sidebar2 much easier to integrate into complex layouts without resorting to JavaScript interop hacks.
Thank You!
Thanks for the great component library — this is the only issue I’ve had while integrating Sidebar2 into a real-world layout.gvreddy04