halfmoonui / halfmoon

Halfmoon is a highly customizable, drop-in Bootstrap replacement. It comes with three built-in core themes, with dark mode support for all themes and components.
https://www.gethalfmoon.com
MIT License
3.01k stars 118 forks source link

Default sidebar with small screen results in offscreen content #131

Closed aelr closed 1 year ago

aelr commented 1 year ago

When using a Default type Sidebar, when you go below the smallest breakpoint, the left: var(--sidebar-width); on .content-wrapper falls off, and a sidebar width's of content moves off the right of the page, and there's no way to scroll to it. This is reproducible on the Default Sidebar example on the docs (link). Is there any way to force the content to keep shrinking while keeping the sidebar open?

I'm intentionally not using overlayed-sm-and-down, as it covers the sidebar toggle on my navbar. The sidebar is intended to stay pinned open for long periods, not opened briefly and dismissed.

Is this a feature or a bug? Should I instead use the grid system to create a left column "sidebar" that I toggle on and off like a sidebar?

aelr commented 1 year ago

More detail on the use case: I built a lite Storybook replacement, and the sidebar is the story navigator. A goal is to be able to resize the window and see how components handle small widths (for use in their own grid columns). But this behavior doesn't let me shrink the component beyond that breakpoint.

I guess the expectation is that if your window is that small, there's no way that the remaining space could render something reasonable. The more I think this through, I expect I'll just need to wire up a grid for the sidebar or provide a mechanism to render empty columns next to components to shrink them down and check behavior. The latter is probably the simplest.

aelr commented 1 year ago

I went with that approach.