The Sidebar

...

The Sidebar is a flexbox that give a fixed width to one of its children, and the space left to the other child. By default, the Sidebar switch to a vertical layout when the content Element's (the children that is not the sidebar) width is equal to 50% of the Sidebar component.

side: define the position of the Sidebar, left or right.
side-width: define the width of the Sidebar.
content-min: is a breakpoint defined on the content element's width, that wraps the component to a vertical layout.
gap: the space between the sidebar and the content element.
reverse: lets you wrap the sidebar with the content on top and the sidebar on the bottom.
shrink: by default, the Sidebar's children doesnt shrink, which means that both elements will have the same height. By giving the shrink attribute to the element, both children elements will adopt their natural heights.

Examples

The first thing to do is to define the side of the sidebar.

If you want the sidebar on the left, you add `side="left"`.

sidebar

content

If you want the sidebar on the right, you add `side="right"`.

content

sidebar

You can define the width of the sidebar with `side-width`. (It gives a width to the side element only, not the content element).

sidebar

content

With `content-min`, you can define when the sidebar should wrap. If you set `content-min` to 60%, it means that when the content element's width will be smaller than 60% of the component, the sidebar will wrap.

sidebar

content

If you want elements inside the Sidebar to take the height of their content you just have to add the `shrink` attribute.

sidebar

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

The reverse attribute, lets you wrap the content the other way around. Just see by yourself, when wrapped, the content will be on top and the sidebar on bottom.

sidebar

content

One last thing, if you want to space the elements inside the Sidebar just use the `gap` attribute.

sidebar

content