-
Notifications
You must be signed in to change notification settings - Fork 2
Off Canvas Sidebars
Adding An Off-Canvas sidebar can be easily done by setting up a small set of prerequisites.
- Create the Sidebar Element
- Update the Sidebar Widths via LESS
- Create the Toggle Switch Element
##1. Create the Sidebar Element
Currently sidebars can be added via the content.js
file. (Likely to change)
Locate the sidebar
variable and add a new node following the prerequisites below.
All properties are required for the sidebar to function.
var sidebars = [
{
id: 'foo', //Sets the ID of the sidebar which will be targeted by 'data-sidebar' elements
width: 656, //Any width accepted
position:'left', //Accepts 'left'/'right'
content: 'template' //Template name containing given sidebar's content
},
}];
##2. Update the sidebar widths via LESS (Ideally will do automatically)
Your theme's LESS configuration will need to be updated to match all of the provided widths in content.js
.
Navigate to the options.less
file in your theme folder and update the line reading like so:
@offCanvasWidths : 356,656,700,1100; //Accepts infinite values 0-N
.
Lastly, we can create an element which toggles the display of said sidebar.
Any element can be treated as a sidebar toggle switch. The only requirement is that the element has the attribute data-sidebar
and that it's value is that of which resembles the given sidebar's id
property.
<button data-sidebar="foo">Foo</button>
And that's it. Happy clicking!
This page is subject and likely to change.