Off Canvas Sidebars

Adding An Off-Canvas sidebar can be easily done by setting up a small set of prerequisites.

1. Create the Sidebar Element
2. Update the Sidebar Widths via LESS
3. 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.

---

3. Create the Toggle Switch Element

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.