The Sidebar

When you need both fixed and flexible columns to wrap elegantly on mobile you can use The Sidebar object


      @skyline/vue (10.18.0)


      @skyline/scss (4.11.0)

About The Sidebar
Examples
API for Vue Components
- SkySidebar

Unsure if the Sidebar is right for your situation? Ask yourself these questions:

Do I have one section of the content that should stay fixed as the container shrinks?
Do I have a second section of the content that can fluidly shrink and expand as needed?
Do I want the column on the right to move below the column on the left when the fluid column runs out of space?

If you answered “no” to these questions, you might be better off exploring our other Layout components, or building something more custom that can use Flexbox + Media Queries.

Controlling The Sidebar

We can change the behaviour of the Sidebar by adjusting these properties:

The size of the container the sidebar lives within (for example, the size of its section of the page).
The size of the fixed column. This can be done either by specifying the size of the column, or by setting the maximum size of the element within it (for example, an image).
The percentage of the container the fluid column is allowed to take up compared to the fixed column before it stops trying to shrink and switches to wrapping (for example, 50%).
The gutter between the fixed and fluid columns when not wrapping (for example, our 400 spacing unit).